Il formato SVG: da Illustrator al web in 5 minuti

Hai sentito parlare di “formato SVG”, ma non sai che cosa sia esattamente?

In questo articolo ti spiegherò nel dettaglio qual è l’origine storica del formato Svg, quali sono i suoi ambiti di applicazione e quali sono i principali vantaggi rispetto ai più diffusi jpeg, gif o png.

Alla fine  sarai in grado di creare un file Svg e utilizzarlo all’interno dei tuoi progetti ;)

Sei pronto? Buona lettura!

Innanzitutto, che cos’è il formato Svg e quali sono le sue prerogative?

L’ SVG (Scalable Vector Graphics) è un formato file immagine creato nel 1998 e basato sul linguaggio marcatore XML: consiste in una tecnologia in grado di visualizzare oggetti grafici vettoriali e quindi di gestire immagini scalabili dimensionalmente.

Questo formato ricopre da anni una particolare importanza nel mondo del web ed è definito come standard dal World Wide Web Consortium (W3C). Assieme ad HTML e CSS infatti rappresenta uno dei pilastri del web attuale e futuro.

Una delle particolarità di questo formato è legata al fatto che può essere generato e manipolato mediante il ricorso ai più popolari softwares di grafica vettoriale, come Adobe Illustrator o Corel Draw.

Puoi provare gratuitamente Adobe Illustrator per 7 giorni da questo link.

Ma non è tutto: essendo un elemento basato su linguaggio XML, può essere modificato con un semplice editor di testo, tramite il codice sorgente.

Ok Marco, ma dove vengono utilizzate le immagini SVG?

Attualmente il formato Svg ricopre un ruolo fondamentale nel web design; viene utilizzato all’interno di pagine web in sostituzione di immagini GIF, JPEG o PNG perché, essendo un formato di grafica vettoriale, può adattarsi al meglio alla dimensione di ogni browser o dispositivo.

I vantaggi del formato Svg

Ma vediamo quali sono i vantaggi legati all’utilizzo di immagini SVG all’interno di pagine internet:

1. La scalabilità

Risulta possibile scalare all’infinito le immagini in formato SVG e adattarle a qualsiasi dispositivo o pagina web senza perdite di qualità e definizione.

2. La velocità di caricamento del sito

Le immagini SVG migliorano la velocità di caricamento delle pagine web grazie ad un peso decisamente ridotto rispetto ai tradizionali formati grafici JPEG, GIF e PNG. Permettono quindi di risparmiare banda.

3. Immagini modificabili da codice

Grazie al ricorso a file SVG risulta possibile modificare il file direttamente dal codice sorgente della pagina web dentro la quale è inserito, di modo che gli elementi possano essere isolati, i colori cambiati, lo spessore del tratto e la trasparenza trasformati. Alle immagini Svg possono essere inoltre applicati filtri oppure animazioni tramite CSS e Javascript.

Come aprire e visualizzare un formato svg?

Bene, ma come posso aprire e visualizzare correttamente un file in formato SVG?

Per quanto riguarda la visualizzazione di questo formato, esistono due possibilità:

Opzione 1: Visualizzare il documento all’interno di un qualsiasi web browser

Opzione 2: Utilizzare un software di grafica vettoriale come Illustrator, Corel Draw o Inkscape.

Quali elementi grafici possono essere in Svg?

Ok Marco, da quello che ho capito, le immagini Svg offrono molti vantaggi e possono essere utilizzate in sostituzione dei classici formati bitmap Jpeg, Png o Gif, ma, quali sono gli elementi grafici SVG che possono essere implementati in un sito web?

Generalmente puoi utilizzare immagini Svg per tutti quegli elementi di tipo flat che compongono l’interfaccia grafica e che non sono puramente raster (cioè basati su mappe di pixel come immagini provenienti da fotocamere o da scansioni).

Quindi:

Le icone: elementi grafici sempre più importanti nel mondo del web. Sono considerati un linguaggio universale utile a migliorare la navigabilità e l’esperienza utente all’interno delle pagine. Al giorno d’oggi la maggior parte delle icone adottate nei siti web provengono direttamente dai fonts, ma laddove si necessiti di icone personalizzate o animate è possibile ricorrere al formato SVG.

I loghi: creare un logo in formato Svg significa dimenticare qualsiasi problema di qualità, risoluzione o adattabilità sui diversi dispositivi e browser.

Gli elementi decorativi di un sito: stelle, riquadri, pulsanti ecc.

Le animazioni: tramite i codici CSS3 e JavaScript è possibile animare elementi Svg e creare icone, pulsanti ed oggetti interattivi. Ecco un icona Svg con animazione.

Ecco come creare un file Svg con Illustrator

Appresi i vantaggi e i campi di applicazione di questo formato vettoriale, vediamo come ottenere un’ icona da utilizzare all’interno di una pagina web.

Si, ovviamente lo faremo con Adobe Illustrator!

La procedura è molto semplice:

#1 creo un nuovo documento di Illustrator.

#2 Decido di utilizzare un’icona presente nel pannello simboli all’interno della biblioteca “Icone web” e la posiziono all’interno della tavola da disegno.

#3 Esporto l’icona tramite la voce di menu File>Esporta>Esporta per schermi (questa è una recente funzione di Illustrator CC 2017 che ho analizzato qui nel dettaglio).

#4 Aperta la finestra di dialogo Esporta per schermi, faccio clic sulla tab Risorse e poi su Pannello esportazione risorsa. Trascino l’icona all’interno dell’apposita area.

#5 Modifico il nome dell’icona e, nell’area inferiore “Esporta impostazioni”, scelgo il formato d’esportazione SVG. Faccio clic sul pulsante “Esporta” e decido la posizione in cui salvare il file. Ottimo!

In realtà puoi anche generare il file Svg con il metodo di salvataggio classico File>Salva con nome e poi scegliere il formato Svg. Con questa procedura hai accesso ad una finestra di dialogo relativa alle Opzioni Svg.

Qui, in primo luogo, puoi definire un Profilo da assegnare al tuo file.

Che cosa sono i profili? Te lo spiego rapidamente.

Il grande successo dell’SVG ha portato a studiare l’ampliamento del suo campo di utilizzo e per questo è stato necessario definire dei sottoinsiemi del formato stesso detti “profili”.

Ogni profilo specifica la definizione del tipo di documento SVG XML del file esportato.

I significati di ogni profilo

Ecco un estratto del sito https://helpx.adobe.com/it/illustrator/using/saving-artwork.html che spiega il significato di ogni profilo:

SVG 1.0 e SVG 1.1: Indicati per i file SVG che verranno visualizzati su un computer desktop. SVG 1.1 è la versione integrata della specifica SVG, che comprende le versioni SVG Tiny 1.1, SVG Tiny 1.1 Plus e SVG Basic 1.1.

SVG Basic 1.1: Indicato per i file SVG che verranno visualizzati su dispositivi con potenza media, quali i palmari. Tenete presente che non tutti i palmari supportano il profilo SVG Basic. Di conseguenza, questa opzione non garantisce che il file SVG sarà visualizzabile su tutti i dispositivi palmari. SVG Basic non supporta i ritagli non rettangolari e alcuni effetti filtro SVG.

SVG Tiny 1.1 e SVG Tiny 1.1+: Indicati per i file SVG che verranno visualizzati su dispositivi di piccole dimensioni, quali i telefoni cellulari. Tenete presente che non tutti i telefoni cellulari supportano i profili SVG Tiny e SVG Tiny Plus. Di conseguenza, queste opzioni non garantiscono che il file SVG sarà visualizzabile su tutti i dispositivi di piccole dimensioni.

SVG Tiny 1.2: Indicati per i file SVG che verranno visualizzati su diversi dispositivi, quali palmari, cellulari, computer portatili e desktop.

SVG Tiny non supporta le sfumature, le trasparenze, i ritagli, le maschere, i simboli, i patterns, il testo sottolineato o barrato, il testo verticale o gli effetti filtro SVG. SVG Tiny Plus consente di visualizzare le sfumature e le trasparenze, ma non supporta i ritagli, le maschere, i simboli e gli effetti filtro SVG.

Suggerimento: per ulteriori informazioni sui profili SVG, consultate la specifica SVG sul sito Web del WC (World Wide Web Consortium) (3.www.w3.org).

Proseguiamo con le opzioni della finestra “Opzioni Svg”

All’interno della sezione Font puoi definire le impostazioni di esportazione degli elementi testuali.

I file Svg infatti possono contenere sia oggetti vettoriali che elementi di testo o addirittura immagini bitmap.

Di conseguenza, a fianco della voce “Tipo” hai la possibilità di decidere se salvare i caratteri come oggetti testuali (SVG), oppure convertirli automaticamente in contorni (Converti in contorni).

L’opzione “sottoinsiemi” ti permette di scegliere quali fonts salvare all’interno del documento. Questo è utile solo se decidi di esportare un testo senza convertirlo in contorni.

Ovviamente, aggiungere interi fonts al documento, aumenta notevolmente le dimensioni del file, sebbene esista la possibilità di includere solo determinati glifi.

Anche le voci all’interno della sezione opzioni hanno un enorme impatto sulle dimensioni del file: come ti ho detto poc’anzi, i documenti SVG possono inglobare anche immagini bitmap e qui, puoi decidere se includerle sotto forma di codice oppure collegarle al documento.

Fai attenzione: l’incorporamento aumenta notevolmente il peso del file.

L’ultima opzione “Mantieni funzioni di modifica in Illustrator” ti permette di mantenere le capacità di modifica di Illustrator se necessario. Questo significa che i dettagli di tutti i livelli, filtri, effetti, simboli ed altro verranno mantenuti editabili.

Da Illustrator al Web: come inserire un file SVG in una pagina internet

Come già spiegato, i file SVG possono essere visualizzati all’interno di un normale browser web, quindi, dopo aver salvato il tuo documento puoi fare un clic con il tasto destro sul file e aprirlo con un browser presente sul tuo computer (Safari, Firefox, Chrome o Edge).

Ed ecco il risultato:

La prima cosa da notare è che il file SVG ha mantenuto le dimensioni originali assegnate in Illustrator.

La tavola da disegno determina i confini esterni mentre l’icona si trova esattamente al centro.

Implementare un file SVG in una pagina Web

Bene, ora che hai testato il funzionamento del tuo file Svg, ti spiego come implementarlo correttamente in una pagina web.

Andrò a creare un nuovo documento .html contenete la mia immagine Svg e per farlo utilizzerò il software Dreamweaver.

Una volta creato un nuovo documento HTML, utilizzo il tag <img> per aggiungere il mio Svg. Il tag <img> solitamente viene impiegato per inserire immagini JPG o PNG.

Ecco il codice da inserire all’interno dei tag <body>…</body>:

<img src="SVG-Test.svg" />

Nell’attributo src devi specificare l’origine dell’immagine. Tipicamente va inserito l’URL, o un percorso che punti ad un file.

Adesso non ti resta che salvare il documento in HTML e aprirlo in un qualsiasi browser.

Fantastico Marco, ma il risultato è identico a prima!

Vero, ma la differenza è che ora posso modificare in qualsiasi momento il codice HTML e personalizzare la visualizzazione dell’immagine SVG.

Riaprendo il file con Adobe Dreamweaver posso aggiungere nuove proprietà al tag; usando, ad esempio, la proprietà “width=“ posso specificare la dimensione di larghezza dell’immagine:

<img src="SVG-Test.svg" width="900" />

Ma non è tutto…

Devi sapere che esiste un secondo metodo per implementare le immagini Svg all’interno delle pagine web. L’approccio seguente è ritenuto più affidabile, flessibile ed è caratterizzato dall’impiego del tag <object> da inserire sempre tra <body>…</body>

<object type="image/svg+xml" data="SVG-Test.svg"></object>

Inserire un file Svg in una pagina web utilizzando il codice XML.

Come ti ho spiegato all’inizio, la tecnologia Svg è un linguaggio derivato dall’Xml, infatti, se apri l’immagine con un Editor di testo, il risultato è il seguente:

Puoi usare questo codice XML incollandolo direttamente nel tuo file HTML.

Conclusione e guida completa

Bene, hai imparato che cosa sono le immagini Svg, come realizzarle e implementare all’interno del codice HTML di una pagina web. Ora dovresti avere le idee chiare sui principali impieghi e le diverse potenzialità offerte da questo formato vettoriale.

Certo, ci sarebbe ancora tanto da dire. Se vuoi veramente approfondire l’argomento ti rimando alla guida completa su HTML.IT https://www.html.it/guide/guida-svg/.

E tu? Hai qualche consiglio da dare? Domande o dubbi? Aspetto di sentire la tua nei commenti!

Noi ci vediamo al prossimo articolo.

Marco