Le icone e gli SVG

All'interno di un sito web, le icone sono utilizzate molto frequentemente: per i loghi (come le favicon), per rappresentare azioni o funzionalità dell'interfaccia e in molte altre situazioni. Oggi la maggior parte delle icone viene realizzata in formato SVG, perché offre un'elevata qualità di immagine e grande flessibilità.

Gli SVG

Gli SVG (sigla che sta per "Scalable Vector Graphics") sono immagini vettoriali. A differenza delle immagini tradizionali, possono essere ingranditi o rimpiccioliti senza perdere qualità: la figura si adatta alla risoluzione dello schermo dell'utente e rimane sempre nitida, senza apparire sgranata.
Per creare un'immagine SVG direttamente all'interno della pagina HTML si utilizza il tag <svg>.

Esempi di SVG

Creiamo un semplice esempio di SVG: un cerchio contenente al suo interno la lettera A.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" fill="lightblue" stroke-width="1"/>
  <text fill="#000000" " font-family="arial" font-size="30 x="40" y="63">A</text>
</svg>

Alcuni browser molto datati o non aggiornati potrebbero non supportare gli SVG. Per questo motivo è possibile inserire un testo tra i tag <svg> e </svg>: questo contenuto verrà mostrato solo se il browser non è in grado di visualizzare l'SVG.

<svg width="100" height="100">
Logo A
  <circle cx="50" cy="50" r="40" stroke="black" fill="lightblue" stroke-width="1"/>
  <text fill="#000000" font-family="arial" font-size="30 x="40" y="63">A</text>
</svg>

Gli SVG come immagini

Gli SVG possono anche essere salvati come file con estensione .svg. Utilizzando il tag <img> e l'attributo src="percorso-del-file.svg", è possibile caricare il file all'interno della pagina HTML. Anche se viene inserito come un'immagine, manterrà tutte le caratteristiche tipiche di un file SVG, come l'elevata qualità.

<img src="esempio.svg" alt="Un SVG di esempio.">

Scaricare gli SVG

Esistono numerosi siti web che mettono a disposizione raccolte di icone SVG gratuite o a pagamento. Tra i più conosciuti troviamo:

• Icone Bootstrap: scegli un'icona, poi copia il codice e incollalo direttamente nella tua pagina HTML.
• Icone Google: scegli un'icona e scaricala in formato SVG. Successivamente apri il file nel browser, fai clic con il tasto destro e seleziona Esamina oppure Ispeziona. Si aprirà il pannello degli strumenti per sviluppatori, dal quale potrai copiare tutto il contenuto compreso tra i tag <svg> e </svg> per inserirlo nella tua pagina HTML.

Altre icone

Sebbene oggi la maggior parte delle icone venga distribuita in formato SVG, è ancora possibile utilizzare immagini in formato PNG, che supportano lo sfondo trasparente. Nei siti web moderni, però, è molto diffuso anche il formato WEBP, che offre una qualità simile o superiore al PNG con dimensioni del file generalmente inferiori. Questo permette di ridurre il tempo di caricamento delle pagine e migliorare le prestazioni del sito. Se disponi di un'immagine PNG, puoi convertirla facilmente in WEBP utilizzando uno dei numerosi strumenti online dedicati.