Quando si tratta di elementi multimediali HTML si dà veramente da fare, abbiamo già visto le immagini, video, audio e incorporamenti di altri siti con iframe, manca all’appello un secondo tipo di immagine, i vettoriali.
Devi sapere infatti che sul web si lavora con due tipi di immagini:
- _immagini rasterizzate: _esse sono definite usando una griglia di pixel e contiene tutte le informazioni esatte di dove un pixel è posizionato e quale colore deve avere. Le immagini rasterizzate sono disponibili in diversi formati, come Bitmap (
.bmp), PNG (.png), JPEG (.jpg) e GIF (.gif) - immagini vettoriali: esse sono definite algoritmicamente, contengono definizioni di forme e percorsi che il computer può usare per mostrare l’immagine a schermo.
Le immagini vettoriali sono, inoltre, più leggere rispetto alla loro controparte rasterizzata perché non devono memorizzare le informazioni per ogni pixel, ma solo una serie di algoritmi. Tipicamente quando si parla di immagini vettoriali si parla del formato SVG, ma cos’è esattamente? Lo vediamo subito
Cos’è SVG?
SVG è un linguaggio basato su XML che descrive le immagini vettoriali. Assomiglia molto ad HTML, ma non viene usato per formattare del contenuto, ma per le grafiche. Alcuni elementi disponibili in SVG sono: <circle>, <rect>, <mask>, ecc.
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="34" cy="34" r="34" fill="#61CCB0"/> </svg>
Per quanto creare un SVG è abbastanza semplice, diventa complicato rapidamente, soprattutto nelle grafiche più complesse, per questo per generare gli SVG si usano software come Adobe Illustrator, Inkscape, Figma, ecc.
Quali sono i pro e contro di usare SVG?
Come vedremo tra poco SVG può essere incluso in più modi nel documento HTML, ma generalmente parlando i pro di usare SVG sono:
- Il testo nei vettori è accessibile
- Ogni elemento di SVG è manipolabile con CSS e JavaScript
Mentre i contro sono:
- SVG si complica rapidamente, il file cresce di dimensione e per il browser diventa complesso da processare
- SVG potrebbe risultare più difficoltoso da creare rispetto ad un'immagine rasterizzata
In linea di massima quando si tratta di grafiche complesse è sempre meglio optare per immagine rasterizzate, mentre quando si tratta di icone o illustrazioni molto semplice si può tranquillamente optare per il vettoriale.
Come si può aggiungere SVG in HTML?
Il metodo più semplice è attraverso il già noto tag <img />. Come tutto, questo metodo, ha i suoi pro e i suoi contro:
- pro di incorporare svg con il tag
<img />- veloce e il tag img è di facile utilizzo, inoltre abbiamo anche l’alternative text
- i link sono più veloci da creare con un tag <img />
- il file SVG può essere memorizzato dal browser, così da poterlo scaricare più velocemente nelle richieste future.
- contro di incorporare svg con il tag
<img />- non può essere manipolato con JavaScript
- se vogliamo personalizzarlo con CSS dobbiamo includere inline (i file esterni non hanno effetto)
- le pseudo classi d’interazione di CSS non hanno effetto
<img src="images/bolt.svg" alt="immagine vettoriale di un lampo" width="200" />
Il secondo metodo è quello di copiare e incollare il codice SVG direttamente nel documento HTML.
- Pro di usare svg direttamente nel documento HTML:
- riduzione delle richieste tra client e server
- possiamo aggiungere classi e ID per personalizzarlo con CSS
- possiamo creare animazioni CSS e usare le pseudo classi di interazione
- gli elementi svg possono essere trasformati in link con l’uso del tag <a>
- Contro di usare svg direttamente nel documento HTML:
- svg duplicati tendono ad aumentare la complessità di manutenzione
- viene incrementata la dimensione del file HTML
- non vengono salvati in memoria
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" /> </svg>
Con questo quindi possiamo dire che l’uso e la modalità d’uso dipende molto dalle circostanze, quindi bisogna sempre valutare caso per caso.