Che sia per un menu di navigazione, per link ai social media o semplicemente per abbellire il look del sito, ogni sito moderno in qualche modo fa uso di icone.
Nel passato l’utilizzo di icone sotto forma di immagini png era una usanza molto comune, ma sono sempre più i siti che hanno fatto il passaggio alle icone SVG. Vediamo perché:
Il problema con le immagini è che non scalano bene con il ridimensionamento dello schermo. Infatti le immagini png o jpeg, a differenza di quelle SVG, non sono altro che un file contenente una lista di colori, assegnati a pixel specifici. (Come vediamo in foto)
Questo processo di assegnazione esplicita di colori può essere problematica, quando parliamo di web design. Soprattutto se stiamo lavorando su un sito responsive, ovvero con versione per smartphone.
Immaginiamo di aver bisogno di un logo molto grande nella nostra home page.
Possiamo utilizzare per esempio un file png con dimensioni 1000x500px, ma se visualizziamo lo stesso sito da un dispositivo con schermo più piccolo, ci ritroveremo a ricaricare la stessa immagine 1000x500px, per poi adattarla al nostro schermo. Questo causerebbe sia uno spreco di memoria che una serie processi di ridimensionamento che potevano essere evitati.
Se stiamo cercando di rappresentare una foto di un panorama o una foto molto dettagliata la soluzione migliore è specificare esplicitamente i colori di ogni pixel (png, jpeg, etc), ma se l’immagine in questione è una semplice icona, formata da linee e figure geometriche, allora possiamo sfruttare la tecnologia dei file SVG.
Come funzionano i file SVG?
Un file SVG a differenza delle immagini png, non fornisce al pc le informazioni su ogni pixel, ma fornisce un set di istruzioni che possono essere utilizzate per ricreare un’immagine. Questo set di istruzioni sono sotto forma di funzioni matematiche, un po’ come lo studio di funzioni che si faceva alle superiori, dove data una funzione si poteva ricavare una linea o curva su un grafico.
Il vantaggio principale delle icone SVG è che queste possono essere ingrandite o rimpiccolite senza perdere qualità (come possiamo vedere nella screen presa da
Font Awesome (Libreria gratuita di icone SVG))
Se capiamo il funzionamento dei file svg, allora dovrebbe essere ovvio che per la rappresentazione di icone e logo, che solitamente sono figure relativamente semplici, sia più efficace l’utilizzo di file SVG.
Infatti i file file SVG portano molti vantaggi con il loro uso, eccone alcuni:
- I file SVG Possono essere ridimensionati a qualsiasi dimensione senza perdita di qualità o aggiunta di memoria.
- Si possono modificare in tempo reale le proprietà interne del file SVG tramite JavaScript, per ottenere animazioni e transizioni.
- I file SVG possono essere generati in modo dinamico.
- I file SVG possono essere modificati tramite regole CSS
Grazie per aver seguito questo post sull'utilizzo delle icone png e SVG. Se ti è piaciuta condividila e seguici su Facebook o Twitter.
Alla prossima
