SVG

SVG (Scalable Vector Graphics) è un formato immagine indipendente dalla risoluzione che usa forme matematiche invece dei pixel. Resta nitido a qualsiasi dimensione senza aumentare il peso del file.

Vettoriale e raster a confronto

La differenza fondamentale tra SVG e formati come PNG, JPG o WebP sta nel modo in cui rappresentano le immagini.

I formati raster memorizzano un'immagine come griglia di pixel, ciascuno con un determinato valore di colore. Un PNG da 1000x1000 contiene esattamente un milione di pixel. Se lo si ingrandisce a 2000x2000, l'immagine perde nitidezza perché i nuovi pixel devono essere interpolati da quelli esistenti. Riducendolo, invece, si eliminano pixel e si rischia di perdere dettagli.

SVG memorizza istruzioni matematiche: disegna un cerchio in questa posizione e con questo raggio, traccia una linea tra due punti, riempi una forma con un colore. Poiché descrivono la geometria e non i singoli pixel, queste istruzioni possono essere riprodotte a qualsiasi dimensione con la stessa nitidezza. Un'icona SVG da 1 KB appare identica a 16 e a 16.000 pixel.

Questa distinzione determina quale approccio usare. I contenuti costituiti in origine da forme, testo e linee, come icone, loghi, diagrammi e grafici, si prestano naturalmente a SVG. Quelli ottenuti acquisendo pixel, come fotografie, screenshot e documenti scansionati, devono restare raster.

Dove si usa SVG

• Icone ed elementi dell'interfaccia — le icone SVG si adattano perfettamente alle diverse densità di pixel. Un solo file sostituisce più PNG da 16px, 32px, 64px e così via, mantenendo la nitidezza sui display Retina e ad alta densità.
• Loghi e identità visiva — un logo deve funzionare a dimensioni molto diverse, dalla favicon al materiale stampato. SVG lo consente senza perdita di qualità né aumento del peso del file.
• Visualizzazione dei dati — grafici e diagrammi SVG possono essere ingranditi, stilizzati con CSS e resi interattivi con JavaScript.
• Illustrazioni e infografiche — le illustrazioni vettoriali restano chiare a ogni livello di zoom e possono adattarsi ai temi CSS, per esempio alla modalità scura, senza file separati.
• Animazioni web — gli elementi animati creati con SVG e CSS o JavaScript evitano il peso dei formati raster animati.

SVG e screenshot

SVG e gli screenshot si trovano ai due estremi dello spettro dei formati immagine. Uno screenshot acquisisce i pixel dello schermo e genera dati raster; SVG memorizza forme vettoriali. Non è possibile passare dall'uno all'altro senza cambiare la natura del contenuto.

Quando uno screenshot comprende elementi SVG, come icone, loghi o grafica vettoriale dell'interfaccia, questi vengono rasterizzati al momento dell'acquisizione. Il file PNG o WebP risultante non contiene più i dati vettoriali originali.

La differenza conta nella documentazione. Se accanto agli screenshot servono diagrammi scalabili, conviene conservare i file SVG separati e inserirli insieme alle immagini raster, anziché cercare di acquisire tutto in un'unica immagine. Alcuni strumenti di acquisizione ed esportazione supportano output misti, combinando screenshot raster e sovrapposizioni vettoriali nello stesso documento o nella stessa presentazione.

Negli strumenti di annotazione vettoriale, frecce, riquadri e testo restano indipendenti dalla risoluzione. Le annotazioni rimangono quindi nitide anche quando lo screenshot viene ridimensionato, un vantaggio soprattutto per la documentazione consultata su schermi diversi.

Il ruolo di SVG nei flussi con molti screenshot

SVG non è il formato di acquisizione, ma spesso affianca le immagini catturate nella preparazione dei file finali. Loghi, icone, frecce e richiami possono restare vettoriali mentre lo screenshot dell'interfaccia rimane raster. In questo modo gli elementi grafici restano nitidi senza forzare lo screenshot in un formato inadatto.

Errori comuni

• Esportare progetti complessi in SVG quando il raster sarebbe più leggero. Illustrazioni molto dettagliate, con migliaia di tracciati, possono produrre file SVG più pesanti di un PNG compresso. In questi casi, confronta entrambi i formati.
• Usare SVG per contenuti fotografici. Incorporare dati raster in un SVG aggiunge peso senza offrire vantaggi. Per fotografie e screenshot scegli un formato raster.
• Non ottimizzare i file SVG. Gli strumenti di progettazione spesso esportano metadati superflui, livelli nascosti e attributi ridondanti. Un ottimizzatore può ridurre sensibilmente il peso del file, in alcuni casi del 50% o più.
• Trascurare l'accessibilità. Gli elementi SVG possono includere titolo e descrizione per gli screen reader, ma spesso vengono omessi. Etichette adeguate rendono il contenuto accessibile a tutti.