Inline SVG: Immagini perfette per il web

Introduzione

Ecco un piccolo trick per avere immagini vettoriali perfette grazie all’Inline SVG. Dopo aver subito un declino per alcuni anni, l’SVG torna in gran voga grazie anche alle nuove features introdotte con l’HTML 5.5 e il CSS3. Questo formato utilizzato spesso per realizzare icone per le pagine web, porta con se diversi vantaggi, al tal punto che l’utilizzo delle Icon Font, ampiamente diffuse in questi ultimi anni per la facilità di utilizzo e resa grafica, sta subendo un significativo rallentamento. Questo perché la tecnica dell’Inline SVG risulta essere un’alternativa più che valida con una resa grafica addirittura maggiore. In questo articolo scopriremo come sfruttare le features del codice HTML per inserire in maniera semplice e diretta un elemento creato con grafica vettoriale all’interno delle nostre pagine web o articoli di un blog.

Il vantaggio dell’SVG

Anzitutto, bisogna ricordare che i font icona non sono resi “vettorialmente” ma più precisamente vengono ottimizzati come elementi testuali. Se si desidera una perfetta resa grafica, quindi, si può fare uso delle tecniche di Inline SVG.

Ma perché è cosi vantaggioso utilizzare la grafica vettoriale e in particolare l’SVG per i nostri siti web? La sigla SVG vuol dire Scalable Vector Graphics e indica una tecnologia utilizzata per descrivere oggetti realizzati in grafica vettoriale. Il suo linguaggio è derivato dall’XML, un “meta-linguaggio” considerato uno standard degli sviluppi Web da parte del consorzio W3C. Trattandosi di grafica vettoriale, la geometria di ciascun elemento è definita matematicamente attraverso dei vettori, anziché essere definita mediante pixel come accade per la grafica raster. Questo porta con se diversi vantaggi:

• Possibilità di ridimensionare a piacere qualsiasi elemento grafico mantenendone intatta la qualità;
• Certezza di ottenere sempre la massima qualità su ogni sistema e supporto (Display, stampa etc..);
• Peso in termini di dimensioni dei file è considerevolmente ridotto rispetto a immagini raster.

Due svantaggi, non trascurabili, sono la possibilità di utilizzare un numero ridotto di colori e il “peso” computazionale che impegna i processori a ricalcolare l’immagine in tempo reale ogni volta che si ridimensiona la visualizzazione. In un contesto come il web, utilizzare l’SVG per creare delle immagini semplici può essere un’ottima soluzione per arricchire il nostro sito di icone senza allungare eccessivamente i tempi di caricamento della pagina.

Inline SVG e SVG sprite

Esistono diverse soluzioni per implementare un’immagine SVG. Se vogliamo farlo utilizzando il codice HTML, direttamente nel nostro documento, possiamo utilizzare le tecniche inline. Una procedura inline sicuramente efficace è quella degli SVG sprite, una tecnica che permette di dichiarare gli elementi SVG in un solo punto del DOM, richiamando poi, le immagini ovunque queste siano necessarie.

Uno sprite è quindi un insieme di elementi SVG raggruppati, definiti ognuno all’interno di un tag  <g>, che indica al browser le “coordinate” per descrivere la nostra immagine.

Esempio di Inline SVG sprite

A questo punto non ci rimane che scoprire come utilizzare gli sprite per inserire immagini SVG in una pagina html. Per fare un esempio, supponiamo che voglio inserire l’icona, mostrata qui in alto, in una qualsiasi parte della mia pagina web. Sarà sufficiente scrivere poche righe di codice.

• Prima parte > Innanzitutto, utilizziamo questo codice per descrive la mia icona. Possiamo sostituire il valore di “d” in base all’immagine che vogliamo descrivere:

<svg
display=”none”
version=”1.1″
xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
width=”32″
height=”32″
viewBox=”0 0 32 32″>
<defs>
<g id=”icon-design“>
<path class=”path1” d=”M31.562 25.905l-9.423-9.423c-0.583-0.583-1.538-0.583-2.121 0l-0.707 0.707-5.75-5.75 9.439-9.439h-10l-4.439 4.439-0.439-0.439h-2.121v2.121l0.439 0.439-6.439 6.439 5 5 6.439-6.439 5.75 5.75-0.707 0.707c-0.583 0.583-0.583 1.538 0 2.121l9.423 9.423c0.583 0.583 1.538 0.583 2.121 0l3.535-3.535c0.583-0.583 0.583-1.538 0-2.121z”></path></g></defs></svg>

• Seconda parte >  Il prossimo passo è quello di definire le classi e le proprietà CSS, possiamo inserire questo codice in un file css collegato al nostro html:

.icon {
display: inline-block;
vertical-align: text-top;
padding-right: .3em;
fill: #000000;
}
.icon{ width: 32px; height: 32px; }

.icon-design{ fill: #000000; }

• Terza parte > Adesso per inserire l’icona nel punto desiderato sarà sufficiente richiamare l’id “icon-design” nella corrispondente riga del nostro file html, attraverso questa sintassi:

<svg class=”icon icon-design” viewBox=”0 0 32 32″><use xlink:href=”#icon-design“></use></svg>

In questo modo, in corrispondenza di questa stringa faremo apparire l’immagine costruita precedentemente. Questa procedura ha il vantaggio di non caricare il proprio sito con file da importare e di permetterci di descrivere le immagini vettoriali direttamente dalla pagina html e richiamarle ogni volta che serve grazie al tag <use>.

Considerazioni e commenti

Con questa tecnica possiamo descrivere un’immagine vettoriale utilizzando semplicemente poche righe di codice e senza caricare sul server file o aggiungere link a server esterni. Una procedura utile ma di cui è opportuno non abusare. Come suggerisce Marco Natolli, graphic desiger, web designer e founder di Sushi Design Studio bisogna stare attenti a come facciamo uso questa opzione:

Se il file SVG è troppo complesso, rischi che rallenti le pagine dinamiche, perché non viene compresso e salvato in cache. In quel caso conviene tenerlo separato e “chiamarlo” con un normale <img src>[…] Poi fai attenzione perché W3C validator non ama gli SVG creati con illustrator…

Inoltre, come tutte le classi css è possibile:

…spostare le classi css di ogni SVG in un unico foglio css…

Sta a voi decidere se inserire le classi di ogni SVG in un foglio di stile dedicato o all’interno del css principale. Questo dipende molto da come siete abituati a lavorare. Ovviamente se avete altre considerazioni, suggerimenti o consigli su questo argomento potete lasciare un commento.

Conclusioni

Spero sia stato utile! Grazie a questo trick possiamo utilizzare la grafica vettoriale per inserire immagini sempre perfette o creare le icone dei nostri menù. Nel prossimo articolo vedremo come estrarre le “coordinate” per le path delle immagini grazie ad alcuni software e scopriremo link che mettono a disposizione librerie di immagini e icone utilissime.

SalvaSalva

SalvaSalva