SVG

SVG (Scalable Vector Graphics) è un formato immagine vettoriale basato su XML. Invece di memorizzare pixel, SVG memorizza istruzioni: “disegna un cerchio di raggio 50 in (100, 100), riempi di blu.” Il browser rasterizza al momento della visualizzazione, quindi lo stesso file appare nitido a qualsiasi dimensione, dal 16×16 a un cartellone 4K.

Proprietà:

• Indipendente dalla risoluzione — stesso file per display retina e standard.
• Dimensioni file ridotte per forme semplici — una tipica icona è da 500 byte a 5 KB. Supera ogni formato raster in dimensione per lo stesso contenuto.
• Modificabile come testo — apribile in qualsiasi editor, modifica i dati del percorso, salva. Nessuno strumento proprietario richiesto.
• Stilizzabile con CSS — riempimento, bordo, trasformazione possono provenire da CSS esterno.
• Animabile tramite transizioni CSS e SMIL (anche se SMIL è in via di deprecazione a favore di CSS + WAAPI).

Dove SVG vince: loghi, icone, illustrazioni, diagrammi, visualizzazioni dati. Dove perde: fotografie (nessun modo efficiente per rappresentare milioni di pixel con sfumature sottili come vettori), gradienti complessi (la dimensione del file aumenta notevolmente), rendering 3D (usa canvas/WebGL).

SVG inline (incorporato nell’HTML) è la best practice moderna per le icone — nessuna richiesta separata, stilizzabile con CSS, accessibile tramite aria-label. SVG esterno (in un file separato) va bene per le risorse meno critiche.

La superficie di attacco XSS di cui nessuno ti avvisa: SVG è XML e può contenere tag <script>. Un SVG caricato su un forum, una foto del profilo o un CMS diventa un vettore di esecuzione arbitraria di codice se servito con Content-Type: image/svg+xml dalla stessa origine dell’applicazione. La mitigazione consiste nel sanificare gli SVG caricati dagli utenti (DOMPurify funziona) o servirli da un’origine sandbox (img.example.com invece di example.com). Alcuni host rasterizzano semplicemente gli SVG degli utenti in PNG al momento del caricamento per eliminare completamente il rischio.

Ottimizzare la dimensione dei file SVG: SVGO è lo strumento standard da riga di comando — esegue ~40 plugin che eliminano i metadati, semplificano i percorsi, uniscono le trasformazioni e arrotondano la precisione numerica. I risparmi tipici sulle esportazioni da Sketch/Figma sono del 50-80%, occasionalmente del 95%+ per design con molti livelli nascosti e metadati dell’editor. L’SVG compresso su disco si comprime anche bene con gzip (contenuto testuale), quindi un SVG da 5 KB spesso finisce sotto 1 KB sul cavo. Riferimento: W3C — Scalable Vector Graphics (SVG) 2.

Esempio pratico

Un’icona circolare “X” per chiudere in SVG: <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> — sono ~150 byte non compressi, ~80 byte compressi con gzip, e si renderizza in modo identico a 16px, 24px, 48px o come un adesivo in vinile da 2 metri. Il PNG equivalente a 1x è ~400 byte; a 2x retina è ~1 KB; a 3x è ~1,8 KB; ciascuno in un file separato. L’attributo currentColor dell’SVG consente a una singola icona di ereditare il colore del testo per gli stati hover senza produrre due file immagine. Considera ora un SVG con un gradiente mesh complesso e 5.000 nodi di percorso (un’illustrazione dettagliata esportata da Illustrator): il file cresce fino a ~400 KB e la sua rasterizzazione al momento del disegno costa CPU misurabile per frame. A quel punto un WebP da 25 KB è la scelta migliore — il vettore vince per la geometria semplice, il raster vince per la complessità.

Quando e perché è importante

La scelta del formato giusto cambia il peso della pagina e le prestazioni di rendering di ordini di grandezza. Usa SVG per: loghi (indipendente dalla risoluzione tra i breakpoint), icone monocromatiche (sprite o inline), grafici e infografiche semplici (D3 produce SVG) e qualsiasi immagine che deve essere stilizzata da CSS (icone consapevoli del tema). Usa raster (PNG/WebP/AVIF) per: fotografie, screenshot, gradienti con molte sfumature di colore e qualsiasi immagine con più complessità visiva di quanta un designer sia disposto a esprimere come comandi di percorso. Il vantaggio nascosto dell’SVG è l’accessibilità: un SVG ben strutturato con elementi <title> e <desc> è compatibile con i lettori di schermo in un modo che nessuna immagine raster può essere senza testo alt separato. Riferimento: MDN — SVG.