SVG: capire il formato vettoriale

Un logo PNG può essere perfettamente nitido alla dimensione originale e mostrare i pixel quando viene ingrandito. Lo stesso logo in SVG può restare nitido su una piccola icona, uno schermo ad alta densità o una stampa grande perché non memorizza una griglia fissa: descrive le forme da disegnare.

SVG significa Scalable Vector Graphics. Sul Web ha una doppia natura: è un formato di immagine vettoriale e, allo stesso tempo, un linguaggio di markup basato su XML.

Questa caratteristica spiega perché può essere ridimensionato, stilizzato, ispezionato come testo e, in alcuni casi, reso interattivo.

Raster e vettoriale

Un’immagine raster contiene una griglia di pixel. Una fotografia da 1200 × 800 contiene 960.000 pixel. Se viene ingrandita molto, il software deve interpolare nuovi valori.

Un SVG può invece descrivere un cerchio con:

<circle cx="50" cy="50" r="40" />

Il browser conosce centro, raggio e proprietà grafiche e può ridisegnare la forma alla dimensione necessaria.

Questo non significa che un SVG abbia “dettaglio infinito”: significa che le forme geometriche vengono rasterizzate alla risoluzione di visualizzazione.

Quando usare SVG

SVG è particolarmente adatto a:

• loghi;
• icone;
• diagrammi;
• grafici;
• illustrazioni geometriche;
• motivi e decorazioni.

Per una fotografia complessa, JPEG, WebP o AVIF rimangono normalmente più efficienti. Un SVG può anche incorporare immagini raster: in quel caso le parti vettoriali restano scalabili, ma l’immagine incorporata conserva i limiti della propria risoluzione.

Struttura minima

Un file semplice può essere:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>

<svg> è l’elemento radice. viewBox definisce il sistema di coordinate interno. Gli elementi come <circle>, <rect>, <line> e <path> descrivono le forme.

Perché viewBox è così importante?

viewBox="0 0 100 100" indica che il disegno usa un’area interna che parte da (0,0) e misura 100 × 100 unità.

Il file può poi essere mostrato a 24 × 24 px, 200 × 200 px o altre dimensioni. Il browser adatta il sistema di coordinate al riquadro di rendering.

Eliminare o modificare un viewBox senza comprenderlo può cambiare ritaglio, scala o comportamento responsive.

path e coordinate

<path> è uno degli elementi più potenti. L’attributo d contiene comandi per muovere il punto corrente, tracciare linee, curve e chiudere forme.

I software di grafica generano spesso path molto lunghi con numerosi decimali. Questo è uno dei motivi per cui l’ottimizzazione può ridurre notevolmente il peso, purché non deformi il disegno.

fill, stroke e currentColor

fill controlla il riempimento; stroke il contorno. Per icone integrate nel markup può essere utile currentColor:

<path fill="currentColor" d="..." />

L’icona eredita così il colore CSS del contesto, evitando di mantenere copie separate per temi chiari e scuri.

img, CSS o SVG inline?

Con <img src="icone.svg">, il file si comporta principalmente come una risorsa immagine: semplice da usare e cacheabile, ma meno controllabile internamente dal CSS della pagina.

Come background-image, è adatto a decorazioni.

Un SVG inline inserisce invece il markup direttamente nell’HTML. Ciò permette di stilizzare elementi interni, usare currentColor, gestire stati e, se necessario, interazioni. In cambio, il markup entra nel DOM e richiede maggiore attenzione.

Accessibilità

Un SVG puramente decorativo non dovrebbe aggiungere rumore agli strumenti assistivi. Un SVG informativo deve avere un’alternativa comprensibile nel contesto.

Con <img>, usa un alt appropriato. Per SVG inline, titolo, ruoli e attributi ARIA vanno scelti in base al significato reale dell’elemento.

Non trasformare testi importanti in tracciati solo per semplificare la grafica: un testo reale è generalmente più accessibile, selezionabile e adattabile.

Sicurezza

SVG è XML e può includere più di semplici forme. Un file proveniente da una fonte non affidabile non va inserito inline senza controllo. Script, collegamenti o altre costruzioni possono rappresentare un rischio a seconda del contesto.

Sanitizza quindi gli SVG non affidabili e limita il contenuto a ciò che serve realmente.

SVG e responsive

Un SVG con viewBox corretto può adattarsi molto bene a layout fluidi. Le dimensioni CSS controllano lo spazio visibile, mentre il sistema vettoriale ridisegna le forme.

Questo rende SVG particolarmente adatto a icone, loghi e diagrammi che devono apparire nitidi a dimensioni diverse.

SVG non è sempre il file più piccolo

Un logo semplice può pesare pochissimo. Un’illustrazione con migliaia di punti, filtri complessi o immagini raster incorporate può diventare più pesante di un WebP ottimizzato.

La scelta deve dipendere dalla struttura del contenuto e dal risultato reale, non dall’estensione.

Da ricordare

SVG è ideale quando un’immagine può essere descritta in modo efficiente con forme vettoriali. Mantieni un viewBox coerente, scegli il metodo di integrazione in base a stile e accessibilità e tratta i file non affidabili come contenuto da sanitizzare.