Che cos’è un file SVG?

SVG è un formato di testo semplice che si apre in qualsiasi editor. Conserva forme e coordinate invece che pixel, quindi resta nitido a qualsiasi dimensione: un logo portato alla misura di un cartellone non perde nulla. Si usa per il web, loghi e disegno al tratto e la modifica.

L’estensione è .svg e il nome per esteso è Scalable Vector Graphics. Contano entrambi meno di ciò che il file può contenere, ed è di questo che parla il resto della pagina.

W3C lo ha pubblicato nel 2001. La specifica è SVG 1.1.

L’età serve saperla per un motivo pratico: più un formato è vecchio, più programmi hanno avuto tempo di impararlo.

È pubblicata per intero, quindi la si può implementare partendo dal documento invece che per osservazione: è per questo che il formato compare in così tanti programmi, ed è per questo che file scritti vent’anni fa si aprono ancora. Una specifica pubblicata però non è la stessa cosa di una esente da royalty: dove un formato incapsula un codec, le licenze sui brevetti restano una questione a parte che lo standard non risolve.

SVG conserva il suo contenuto esattamente. Risalvarlo non cambia nulla, quindi puoi aprirlo, modificarlo e risalvarlo quante volte vuoi senza accumulare danni: è questo che ne fa un formato di lavoro e non di consegna.

SVG porta con sé un canale alfa, quindi un logo mantiene i bordi morbidi sopra qualunque cosa ci sia dietro invece di arrivare dentro un riquadro bianco.

SVG può conservare un’animazione anziché una singola immagine ferma. Vale la pena saperlo prima di convertire: una destinazione che tiene un solo fotogramma si tiene il primo e lascia cadere il resto, di solito senza dirlo.

Può lavorare in RGB.

Otto bit per canale è quello che mostra uno schermo e quello che porta praticamente ogni formato di consegna.

SVG tiene separate le parti di un’immagine invece di fonderle insieme, ed è questo che ne fa un file di lavoro. Quasi ogni formato in cui si converte le fonde, e la fusione non si torna indietro: conserva l’originale con i livelli.

Inkscape, Adobe Illustrator e Figma lo leggono, e così fanno quasi tutti i programmi dello stesso tipo.

Quando un file non si apre, il formato è raramente il problema: più spesso è il programma a essere più vecchio di lui. Convertire in qualcosa di più vecchio è la via d’uscita affidabile, ed è a questo che serve il resto di questo sito.

Qualsiasi browser attuale lo legge.

Puoi quindi metterlo su una pagina o allegarlo a un messaggio senza chiederti che cosa abbia installato chi lo riceve.

SVG è pensato per essere aperto e modificato. Tieni il file in questo formato per tutto il tempo in cui il lavoro va avanti, ed esporta da lì ogni volta che serve una copia finita.

Un SVG è un documento XML. Apritelo in un editor di testo e troverete istruzioni leggibili: disegna un cerchio a queste coordinate con questo raggio, riempi questo tracciato con questo colore, posiziona questo testo in questa posizione. Dentro il file non c’è nemmeno un pixel.

Questa proprietà lo colloca in un club molto ristretto: l’EPS è PostScript in testo e anche un DXF si legge a occhio, e con questo finisce l’elenco fra i formati immagine di uso comune. Si può confrontare in un controllo di versione, modificare a mano, generare da uno script, comprimere con lo stesso gzip che comprime l’HTML e cercare al suo interno. Significa anche che un SVG rotto si diagnostica di solito leggendolo, cosa che non avviene con un PNG corrotto.

Il file descrive forme invece di una griglia di valori di colore, quindi chi lo disegna le ridisegna alla dimensione richiesta. Un logo mostrato a 24 pixel e lo stesso logo stampato largo un metro provengono dallo stesso file e sono esatti in entrambi i casi.

Ecco perché l’SVG è la risposta giusta per loghi, icone, schemi e grafici, e quella sbagliata per le fotografie. Una fotografia non ha forme da descrivere: convertirla in SVG produce o un file enorme pieno di rettangoli di colore o un’approssimazione da poster, e nessuna delle due era ciò che si cercava.

Due attributi decidono come si comporta un SVG dentro un’impaginazione. width e height gli danno una dimensione propria; viewBox definisce il sistema di coordinate in cui sono disegnate le forme. Con un viewBox presente, il disegno si scala nella scatola che la pagina gli offre.

Quasi tutte le lamentele su un SVG che appare alla dimensione sbagliata finiscono qui. Un file con dimensioni fisse e senza viewBox ignora il dimensionamento via CSS e resta dov’era il programma di design. Aggiungere un viewBox che corrisponda al disegno è di solito una correzione di una riga, ed è ciò che trasforma un file esportato in una risorsa utilizzabile.

Un SVG che contiene testo chiama i suoi font per nome, come fa una pagina web. Su una macchina che non ha quella famiglia, il programma che disegna ne mette un’altra al suo posto, le larghezze delle lettere cambiano e un marchio posizionato con cura si sposta o esce dalla sua forma.

La difesa abituale è convertire il testo in tracciati, che trasforma ogni lettera in un contorno. Garantisce l’aspetto ovunque e rende il testo permanentemente non modificabile e non ricercabile. Per un logo lo scambio è buono; per un grafico con etichette d’asse o uno schema pensato per essere mantenuto, no, e conservare una versione con testo vivo accanto compensa il secondo file.

Quando un SVG viene scritto direttamente dentro l’HTML, invece di essere caricato tramite un tag immagine, i suoi elementi diventano parte della pagina. Il CSS può ricolorare un tracciato al passaggio del mouse, un foglio di stile può adattare un’icona alla modalità scura e JavaScript può animare pezzi specifici.

Caricato come immagine o come sfondo CSS nulla di tutto ciò si applica: l’SVG viene disegnato isolato e la pagina non può accedere al suo interno. Questa distinzione decide quale tecnica usare, e spiega come lo stesso file possa essere modificabile in un punto del sito e inerte in un altro.

Essendo un documento e non un’immagine, un SVG può contenere elementi script, riferimenti esterni e link. Servito dal vostro stesso dominio e aperto direttamente, quello script viene eseguito con i privilegi del vostro sito, un vettore di esecuzione di codice altrui che un PNG semplicemente non ha.

Ecco perché molti moduli di caricamento rifiutano l’SVG a priori, e perché un sito che accetta quelli dei suoi utenti dovrebbe sanificarli invece di fidarsi. Vale la pena saperlo anche come destinatari: un SVG di origine sconosciuta assomiglia più a un file HTML che a un’immagine, e aprirlo nel browser non è l’atto neutro che sembra.

Illustrator, Figma e Sketch scrivono una quantità notevole di impalcatura: metadati dell’editor, nomi dei livelli, gruppi vuoti, coordinate con sedici decimali e definizioni che nessuno usa. Un’icona che dovrebbe pesare 800 byte viene di solito esportata con otto kilobyte.

Gli ottimizzatori rimuovono tutto questo senza cambiare ciò che viene disegnato, e riduzioni dal 60 all’80 per cento sono comuni. Inoltre comprime molto bene in transito essendo testo — un server che invii gzip o brotli lo riduce ulteriormente — motivo per cui un set di icone SVG ben preparato è spesso più piccolo di un singolo PNG.

Un SVG può incorporare un’immagine a pixel come URI di dati in base64, e alcuni percorsi di esportazione lo fanno senza dirlo: una forma con un effetto che il formato non sa esprimere viene appiattita a immagine e avvolta in SVG.

Il risultato è un file con estensione .svg che non scala, perché ciò che c’è dentro è una griglia di pixel a dimensione fissa. Se un SVG appare sfocato ingrandendolo, questa è quasi sempre la spiegazione, e la correzione va fatta nel file di design, non nell’esportazione.

Il disegno non è fatto dal browser ma da resvg, scelto perché il risultato sia identico su qualsiasi macchina. La risoluzione è decisa solo dalla larghezza: di default sono 1.024 pixel, e l’altezza deriva dalla proporzione del viewBox. C’è un fattore di scala fra 0,1 e 10 per chiederne di più o di meno, salvo nelle uscite verso ICO e PDF, dove quel controllo non esiste e la larghezza è esattamente 1.024.

La tela viene disegnata con lo sfondo completamente trasparente, così la trasparenza si risolve più avanti nella catena immagine. Verso PNG, WebP, AVIF, JXL, TIFF e ICO si conserva; verso JPG, BMP e GIF non può conservarsi e i pixel trasparenti vengono riempiti con un colore di sfondo che potete scegliere, di default bianco. Tutto questo avviene dentro il vostro browser, con un tetto di 100 MB per file: il disegno non viene caricato su alcun server.

Verso GIF, questo convertitore non scrive trasparenza di alcun tipo: il file esce opaco sullo sfondo scelto, con una tavolozza di 256 colori, e in un solo fotogramma. Per un disegno con bordi puliti questo significa quasi sempre che la destinazione corretta era il PNG.

Verso PDF il disegno arriva come immagine disegnata, non come vettori: viene rasterizzato a 1.024 pixel di larghezza e collocato su una singola pagina, senza strato di testo. È perfettamente utilizzabile per guardare e per inviare; se vi serve un PDF vettoriale che stampi nitido a qualsiasi dimensione, l’esportazione dal programma di disegno stesso è la strada.

Quando qui si converte un PNG o un JPG in SVG, ciò che avviene è una vettorizzazione: il motore ridisegna l’immagine come regioni di colore piatto, con otto colori di default. Non recupera le forme originali, perché in una bitmap non ci sono forme da recuperare.

I risultati misurati dicono molto. Un logo piatto esce fedele e di dimensione ragionevole. Un gradiente esce a bande. Uno screenshot con testo ha prodotto un SVG quaranta volte più grande del PNG di partenza, e una fotografia è uscita quattro volte più grande e da poster. Ecco perché il file risultante viene misurato contro l’originale e la pagina vi dice quale dei due casi vi è capitato prima che lo scarichiate.