SVG & Icon Web Font
SVG è un particolare formato di immagine: la sua sigla significa Scalable Vector Graphic ed è quindi di tipo vettoriale. L’immagine o il disegno sono composti da coordinate cartesiane di punti, che originano curve e rette. È un formato leggero: non hai una griglia su cui ogni pixel possiede le sue informazione di colore, ma semplicemente dei punti.
Nel corso degli ultimi anni, questo formato è entrato sempre più prepotentemente nel mondo del Web principalmente per due sue proprietà: è leggero — un’immagine .svg pesa pochissimo — ed è scalabile senza perdita di dettaglio. Questi due fattori ben si sposano con i limiti e i problemi delle reti e delle infrastrutture di Internet. Tuttavia, lo puoi usare?
La risposta è: “ni”! Se (come me) ritieni che il supporto a Microsoft Internet Explorer 8 possa essere oggigiorno diminuito o proprio tolto, allora la risposta è senz’altro sì. Se invece vuoi mantenere ancora la compatibilità con vecchi browser, allora la risposta potrebbe essere no1.
Comunque tu la veda, puoi utilizzare .svg esattamente come una qualsiasi altra immagine: con il relativo tag <img>.
Se usi .svg come sfondo, invece, e vuoi mantenere il supporto ai vecchi browser, potresti utilizzare un piccolo componente JavaScript, Modernizr. Esso ti permette di applicare delle classi a <body>, se è presente o meno una data caratteristica. In questo caso, avresti una classe .no-svg a cui applicare lo stile in modo univoco.
div{
background-image: url(images/my_image.svg);
}
.no-svg div{
background-image: url(images/my_image.png);
}
In questo modo, solo i browser che sanno leggere gli .svg caricheranno la seconda definizione e, per la proprietà della cascata dei CSS, la seconda definizione sovrascriverà la prima.
Gli SVG (e i disegni vettoriali in generale), tuttavia, sono legati ad un’altra implementazione che è stata resa possibile negli ultimi anni: gli Icon Web Fonts.
Questi particolari font presentano al loro interno una piccola variante: invece di stampare lettere e numeri, presentano delle icone. Questo significa che, ad esempio, se digiti una “a”, ottieni l’icona di una matita, oppure una “b” potrebbe far visualizzare un paio di forbici, ecc. Gli Icon Web Fonts sono veramente utili per gestire una serie di icone di cui — magari — il tuo sito ha bisogno, il tutto però all’interno di un unico file. Ne parleremo in dettaglio nel prossimo capitolo, così avrai modo di capire meglio il loro reale (e potente) utilizzo. Se vuoi fare delle prove, tuttavia, esistono dei pacchetti di Icon Web Font già pronti per essere utilizzati. Ad esempio il blasonato Font Awesome ti permette di iniziare a comprendere meglio questa nuova tecnica.
Difficilmente in un progetto avrai la necessità di avere tutte quelle icone (anzi, è già tanto se utilizzerai 1/10). Ragion per cui potresti cominciare ad utilizzare dei servizi che ti permettano di creare Icon Web Fonts partendo da tuoi SVG (ecco svelato il legame tra queste due cose). Ad esempio, io trovo straordinario Fontastic. Grazie ad un’interfaccia semplice ed a delle potenzialità veramente notevoli, puoi crearti i tuoi set di icone in totale libertà. L’ho già detto che è completamente gratuito?