tavolozzacolori
Fabio Di Lupo

SVG e Font Awesome

16
mar
2017

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

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:

  • Si possono creare icone multicolore in cui uno o più elementi possono avere gli stessi colori.
  • Le icone possono avere animazioni interne utilizzando apposite classi nei fogli di stile.
  • Si possono usare proprietà CSS specifiche per gli SVG come stroke o fill.
  • All'interno di una stessa pagina una icona in SVG o parte di essa può essere riutilizzata con apposito link.

Ed uno svantaggio:

  • Se mescolate al testo non ereditano automaticamente colore, sfondo, dimensione

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.

 

^