logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Le icone e gli SVG

All’interno di un sito web, le icone sono sempre molto utilizzate: per i loghi, per le raffigurazioni di alcune opzioni e per altre situazioni. La maggior parte di queste sono SVG.

Gli SVG

Gli SVG sono come delle immagini, ma a differenza di queste la qualità della figura cambia in base allo schermo dell’utente, e quindi non è mai “sgranata”.
Per creare un’icona si utilizza il tag <svg>.

Esempi di SVG

Creiamo un esempio di SVG: un cerchio con all’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 datati o non aggiornati potrebbero non visualizzare gli SVG. Puoi inserire una scritta all’interno dei tag <svg> e </svg> che verrà visualizzata solo in questo caso.

<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 essere salvati come file, con l’estensione .svg. Con i tag <img> e l’attributo src possiamo ricercare quel file e inserirlo tramite questo tag nella pagina HTML. Manterrà sempre le caratteristiche di un SVG.

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

Scaricare gli SVG

Ci sono molti siti web che offrono una vasta scelta di SVG da poter utilizzare. I più conosciuti sono:

Altre icone

La maggior parte delle icone sono SVG, ma possono essere anche inserite delle icone in formato PNG, che mantengono lo sfondo trasparente. Nei siti web spesso si utilizzano i WEBP, file con caratteristiche simili ai PNG ma più leggeri da caricare, migliorando le prestazioni e diminuendo il tempo di caricamento della pagina. Per convertire un PNG in WEBP, puoi utilizzare alcuni siti specifici per questo.

Prossima lezione