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 |