tavolozzacolori

😀 SVG e Font Awesome

Utilizzare icone in formato SVG comporta notevoli vantaggi tra cui la possibilità di creare icone multicolore con animazioni interne

16 marzo 2017 / Siti web

Le icone hanno un ruolo importante nell'aspetto grafico di un sito web. Utilizzandole si può intuire a colpo d'occhio una determinata funzionalità.

Il sistema più usato è quello di utilizzare un font che dispone di un set di icone come ad esempio Font Awesome che nel tempo si è ampliato notevolmente e ad oggi ne contiene ben 675 nella versione 4.7.0. Ci sono altri font di icone ma questo è il più utilizzato.

La dimensione del file CSS di Font Awesome minificato è 31 KB (GZippato è inferiore) e quella dei font varia da un minimo di 76 KB (WOFF2) ad un massimo di 434KB (SVG) a seconda del formato in cui il browser lo scarica.

Ora però nel front-end (area pubblica), si usa solo una piccola parte delle 675 icone disponibili. Se ne usano molte di più nel back-end (area riservata) perché servono per rendere più intuitivi i pulsanti con le funzioni disponibili. 

Così l'idea è stata quella di trovare una soluzione alternativa per le icone dell'area pubblica di un sito web. La soluzione scelta è quella di usare il formato SVG (grafica vettoriale) ed oggi è ben supportato dai vari browser. I formati di immagini JPEG o GIF sono invece bitmap e non offrono ottimi risultati quando sono ingranditi come serve ad esempio su PC con schermi a 27 pollici.

Ma se si usa un file SVG per ogni icona si aumentano il numero delle richieste verso il web server con un corrispondente incremento del tempo impiegato per arrivare all'evento load che è quello in cui il browser visualizza la pagina.

Se invece le icone SVG si integrano direttamente nell'HTML5 (inline SVG) le cose cambiano radicalmente in meglio: si ha la sola richiesta del file HTML5 al web server, si elimina quella al file di Font Awesome e si riduce il peso della pagina perché non si carica il foglio di stile corrispondente ed il file del set di icone. In più il web server riesce a Gzippare bene le icone perché sono testuali.

Solo al momento dell'accesso all'area riservata si carica Font Awesome ma nella cache del browser ci sono già i fogli di stile dell'area pubblica ed i file javascript per cui ... ci si può stare.

Ci sono altri vantaggi:

Ed uno svantaggio:

Ricapitolando: i vantaggi di usare gli inline SVG sono notevoli e consentono di alleggerire il peso complessivo delle pagine web di un sito internet oltre a rendere possibili nuovi effetti grafici.

Vedi anche

https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/white/svg un progetto che rende disponibili le icone di Font-Awesome divise in singoli SVG e PNG.

 

Parlato