Cos’è, a Cosa Serve e Come si Apre il Formato SVG?

L’SVG (Scalable Vector Graphics) è un formato per file immagine realizzato nel 1998.

Basato sul linguaggio XML (Extensible Markup Language), esso è stato implementato attraverso una tecnologia capace di riprodurre elementi grafici vettoriali, la quale consente dunque di gestire delle immagini attraverso differenti scale, in base alle proprie necessità.

Il formato SVG ricopre da molto tempo una grande importanza all’interno del web; non a caso, esso viene considerato uno standard dal World Wide Web Consortium (W3C).

Con HTML e CSS costituisce, infatti, una solida base per il web moderno e futuro.

Un aspetto molto importante del formato SVG è che questo può essere gestito attraverso l’impiego dei più comuni programmi di grafica vettoriale, come Corel Draw o Adobe Illustrator.

grafica gratis

Quali componenti possono venire realizzati in SVG?

Le immagini in formato SVG possono fornire differenti vantaggi, venendo impiegate per sostituire i classici formati JPEG, GIF o PNG.

Quali elementi del formato SVG possono venire utilizzati su un sito web?

Solitamente puoi impiegare immagini SVG per gli oggetti di tipo FLAT che realizzano l’interfaccia grafica e che non si basano su “mappe di pixel” (come immagini generate da scansioni o fotocamere).

Di conseguenza, oggetti come quelli presenti nell’elenco.

  • I loghi. Realizzare un logo nel formato SVG vuol dire non curarsi dei problemi relativi a qualità, flessibilità o risoluzione su differenti device e browser.
  • Oggetti decorativi presenti su un sito. Come riquadri, bottoni, stelle, ecc.
  • Animazioni. Attraverso codici CSS3 e JavaScript si può dare vita a oggetti SVG e realizzare delle icone, degli elementi interattivi o dei bottoni.
  • Icone. Stiamo parlando di oggetti grafici che stanno sempre più assumendo un ruolo di primaria importanza sul web. Le icone costituiscono una modalità universale per ottimizzare la navigabilità di un sito, migliorando l’esperienza dell’internauta sulle pagine web. Al giorno d’oggi, buona parte delle icone utilizzate sui siti web deriva dai font; tuttavia, se si desiderasse optare per una loro personalizzazione, si potrebbe benissimo sfruttare il formato SVG.

Bisogna certamente considerare che essendo un’immagine SVG basata sul linguaggio XML, essa può venire modificata attraverso un comune editor testuale, intervenendo sul codice sorgente.

Al giorno d’oggi questo formato riveste un ruolo di primo piano all’interno del web design, venendo usato nelle pagine web al posto di immagini dal formato GIF, PNG o JPEG.

Questo perché, data la sua natura vettoriale, esso può godere di una grande flessibilità, riuscendo ad adattarsi nel migliore dei modi al browser web o al device.

Aprire un formato SVG

Come si può aprire e vedere un file dal formato SVG?

La visualizzazione di questo formato si realizza attraverso due modalità.

  • 1° opzione: aprire il file direttamente dal browser web.
  • 2° opzione: impiegare un programma di grafica vettoriale, come Inkscape, Corel Draw e Illustrator.
grafica gratis

Gli aspetti positivi del formato SVG

Siamo ora pronti per trattare i vantaggi derivanti dall’impiego di file dal formato SVG sul web.

1. Gestione delle immagini dal codice

Utilizzare file dal formato SVG permette una loro modifica attraverso il codice sorgente della pagina in cui viene immesso; in questo modo si può intervenire sugli oggetti, sui colori, sulle linee e sulla trasparenza.

È possibile applicare dei filtri o delle animazioni attraverso Javascript o CSS.

2. La scalabilità

È possibile scalare i file SVG e adeguarli a qualunque dispositivo o pagina, senza perdere in termini di qualità o definizione.

grafica gratis

3. La rapidità di caricamento della pagina

Le immagini nel formato SVG comportano un aumento del caricamento dei siti; questo per via di un peso molto più basso se paragonato ai più comuni formati GIF, JPEG e PNG. Ciò non può che comportare un risparmio sulla banda.

I profili SVG: cosa sono?

Il successo riscosso dal formato SVG ha senza dubbio stimolato la realizzazione di nuovi studi, volti a comprenderne le potenzialità in ulteriori campi di applicazione; pertanto, sono stati definiti vari sottoinsiemi dello stesso formato, chiamati “profili”.

I profili identificano la rappresentazione del tipo di file SVG XML del documento esportato.

Il significato dei profili

SVG 1.0 e SVG 1.1 sono raccomandati per essere visualizzati su un PC desktop. SVG 1.1 realizza l’edizione integrata della specifica SVG, comprendente le varianti SVG Basic 1.1, SVG Tiny 1.1 e SVG Tiny 1.1 Plus.

SVG Basic 1.1 è consigliato per i documenti SVG sui device di fascia media, come i palmari. Si prega di notare che non tutti i modelli di palmare sono compatibili con il profilo SVG Basic; pertanto, un file SVG non è detto che possa essere visualizzato su ogni dispositivo. SVG Basic supporta solamente i ritagli di tipo rettangolare e non tutti gli effetti filtro SVG.

SVG Tiny 1.1 e SVG Tiny 1.1+ sono consigliati per i file dal formato SVG su device di dimensioni ridotte, come i telefoni cellulari. Si prega di ricordare che non ogni smartphone potrà supportare i profili SVG Tiny e SVG Tiny Plus. Dunque, non si assicura che il formato SVG potrà essere visualizzato sui device di dimensioni ridotte.

grafica gratis

SVG Tiny 1.2 è consigliato per i file SVG da vedere su device come cellulari, laptop e computer desktop.

SVG Tiny non consente di variare nelle sfumature e nelle trasparenze; non è compatibile con maschere, ritagli e filtri SVG.

Si raccomanda di fare riferimento, per informazioni aggiuntive concernenti i profili SVG, alla specifica SVG sulla piattaforma web del W3C (World Wide Web Consortium).

Immettere un file SVG all’interno di una pagina web

Come già detto, i documenti SVG si possono visualizzare all’interno di una pagina web; pertanto, dopo il salvataggio del file, lo puoi visualizzare direttamente da un comune browser, cliccandoci sopra e aprendolo sul computer.

Desiderate imparare i fondamenti di grafica?

Questo sito vi consente di trovare molte risorse per imparare i fondamenti di grafica e dei software Adobe, il tutto in modo facile.

È inoltre presente una vasta scelta di corsi che vi permetteranno di assimilare i concetti fondamentali (estremamente utili per chi sta cominciando), ma anche quelli più complessi.

Sono stati ideati da designer con molti anni d’esperienza; pertanto, potete stare sicuri.

Cliccate sotto per visualizzarli:

footer grafica 1

Alessia T.

Ciao, io sono Alessia e faccio parte del team di Grafica-Facile.com! Ho una grande passione per il design e, avendo molta esperienza nel settore, ho deciso di partecipare in questo bellissimo progetto per condividere il mio sapere sul graphic e web design.

Ritorna alla home

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *