Formati di file
Cos'è l'SVG? Guida al formato vettoriale
L'SVG è un formato di grafica vettoriale basato su XML che resta nitido a qualsiasi dimensione. Vediamo la sua storia, la struttura, i rischi per la sicurezza e la conversione in PNG.
Autore: Hemen Dönüştür Editör EkibiPubblicato: 9 min di lettura
L'SVG è un formato di immagine fatto di istruzioni di disegno anziché di pixel. Quando un logo, un'icona o un grafico viene salvato in SVG, il file contiene comandi come "traccia una curva da questo punto a quello e riempila con questo colore". Per questo l'SVG resta nitido a qualsiasi dimensione, spesso pesa pochissimo e si può aprire e modificare con un editor di testo. In questo articolo vediamo il posto dell'SVG tra gli standard W3C, la struttura del file, il supporto di browser e programmi, i rischi per la sicurezza e come convertire tra SVG e PNG o JPG.
Cos'è l'SVG?
L'SVG (Scalable Vector Graphics) è uno standard W3C basato su XML per descrivere grafica vettoriale bidimensionale. L'estensione è .svg e il tipo MIME è image/svg+xml. Una variante compressa con gzip usa l'estensione .svgz.
I formati raster (JPG, PNG, WebP) memorizzano un'immagine come una griglia fissa di pixel: se la ingrandisci, i pixel diventano visibili. L'SVG descrive le forme in modo matematico e il browser o il programma le ridisegna alla risoluzione dello schermo, qualunque essa sia. La guida ai formati di immagine di MDN definisce l'SVG la scelta ideale per le immagini rappresentabili come comandi di disegno, soprattutto quando la dimensione di visualizzazione è sconosciuta o variabile, e osserva che in genere non è utile per le fotografie.
Storia: SVG 1.0, 1.1 e SVG 2
- 4 settembre 2001: SVG 1.0 viene pubblicato come Raccomandazione W3C.
- 14 gennaio 2003: SVG 1.1 diventa Raccomandazione. La versione 1.1 divide il linguaggio in moduli, cosa che semplifica la definizione di sottoinsiemi come i profili per dispositivi mobili.
- 16 agosto 2011: viene pubblicata la Second Edition di SVG 1.1. È la versione stabile su cui si basano i browser ancora oggi.
- SVG 2: secondo la cronologia delle pubblicazioni del W3C, le bozze di lavoro sono uscite dal 2012 e il primo Candidate Recommendation Snapshot è stato pubblicato il 15 settembre 2016. L'ultimo snapshot è datato 6 ottobre 2026; il documento è ancora nella fase di Candidate Recommendation.
SVG 2 parte dalla Second Edition di SVG 1.1 e punta a un'integrazione migliore con HTML e CSS. Alcuni argomenti come filtri, mascheratura e font sono stati spostati in moduli CSS e FX separati. In pratica i browser implementano solo parti di SVG 2, quindi non dare per scontato che ogni funzione funzioni ovunque.
Struttura di un file SVG
Un file SVG semplice ha questo aspetto:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
<path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>Sistema di coordinate: viewBox, width e height
viewBox definisce il sistema di coordinate interno del disegno (qui da 0 a 100). width e height stabiliscono quanto spazio occupa il disegno nella pagina. Un SVG con viewBox si adatta in proporzione a qualsiasi dimensione gli assegni via CSS. I file senza viewBox possono risultare tagliati quando li ridimensioni: è uno degli errori più comuni con i loghi.
Elementi principali
- Forme:
rect,circle,ellipse,line,polyline,polygonepath, che può disegnare qualsiasi cosa. - Testo:
textetspan. Il testo resta selezionabile e ricercabile, ma se il font manca sul dispositivo di chi guarda viene usato un font sostitutivo. - Raggruppamento e riuso:
g,defs,symbol,use. I set di icone vengono spesso raccolti come elementisymbolin un unico file. - Riempimento e tratto: colori pieni, sfumature lineari e radiali, pattern, tracciati di ritaglio, maschere e filtri (sfocatura, ombra).
- Stile e animazione: il CSS può dare stile all'SVG; le animazioni CSS e gli elementi di animazione SMIL aggiungono movimento.
- Contenuti incorporati:
imageper immagini raster,foreignObjectper l'HTML escriptper JavaScript.
Colore, trasparenza, livelli e pagine
La trasparenza è nativa nell'SVG: tutto ciò che non viene disegnato è vuoto, e opacity e fill-opacity definiscono la semitrasparenza. I livelli sono rappresentati da gruppi g; Inkscape e Illustrator salvano i loro livelli proprio così. I colori sono sRGB per impostazione predefinita e non esiste un limite di profondità di bit nel senso consueto, perché i colori sono scritti come numeri. L'SVG non è un formato per documenti a più pagine; per disegni su più pagine il PDF è più adatto.
Supporto in browser, sistemi e programmi
Secondo MDN, Chrome, Edge, Firefox, Opera e Safari supportano tutti l'SVG. Puoi usarlo tramite <img>, come background-image CSS, inline nell'HTML oppure con <object> e <iframe>. Strumenti vettoriali come Inkscape, Adobe Illustrator, Affinity Designer e Figma leggono e scrivono SVG, e le versioni attuali di Microsoft Office permettono di inserire grafica SVG.
Altrove il supporto è debole: molti social network, client di posta, app di messaggistica e moduli di caricamento rifiutano l'SVG o non ne mostrano l'anteprima. In parte il motivo è il rischio per la sicurezza descritto qui sotto.
Sicurezza: tratta l'SVG come un documento
L'SVG è un documento XML e può contenere un elemento script, attributi di evento (come onload) e riferimenti esterni. La pagina "SVG as an image" di MDN spiega che quando l'SVG è usato tramite <img> o come sfondo CSS, i browser disattivano JavaScript e non caricano risorse esterne come immagini o fogli di stile. Queste restrizioni non valgono quando il file viene aperto direttamente o incorporato con <iframe>, <object> o <embed>.
La conseguenza pratica: se un sito permette agli utenti di caricare file SVG e li serve direttamente dal proprio dominio, uno script incorporato nel file può essere eseguito nel contesto di quel sito (XSS persistente). Le contromisure tipiche:
- Far passare gli SVG caricati da un sanitizer che rimuova
script, attributi di evento,foreignObjecte collegamenti esterni. - Servire i file degli utenti da un dominio separato, con una Content-Security-Policy rigorosa, oppure come download (
Content-Disposition: attachment). - Se il vettoriale non ti serve, convertire sul server gli SVG caricati in PNG e pubblicare solo la versione raster.
Usi tipici
- Loghi e materiali del marchio: un solo file resta nitido dal biglietto da visita al cartellone pubblicitario.
- Icone dell'interfaccia: si colorano con il CSS e non risultano mai sfocate sugli schermi ad alta densità.
- Grafici, mappe e diagrammi: librerie come D3.js disegnano i dati direttamente in elementi SVG.
- Favicon: i browser attuali accettano favicon SVG tramite
<link rel="icon" type="image/svg+xml">. - Taglio e stampa: macchine per il taglio laser, plotter da taglio per vinile e macchine da ricamo lavorano con tracciati vettoriali.
Punti di forza e debolezze
| Punti di forza | Debolezze |
|---|---|
| Nitido a qualsiasi dimensione, indipendente dalla risoluzione | Inadatto a foto e texture complesse |
| File molto piccoli per la grafica semplice | I disegni con molti tracciati diventano pesanti e lenti da visualizzare |
| Basato su testo: modificabile, facile da confrontare, si comprime bene | Script e riferimenti esterni sono un rischio per la sicurezza |
| Stile e interazione con CSS e JavaScript | Il supporto di font e funzioni varia tra i programmi |
Accessibile: title e desc contengono descrizioni | Spesso rifiutato da social network e client di posta |
Problemi comuni e come risolverli
Un sito o un'app non accetta l'SVG
La soluzione più semplice è una copia in PNG. Il nostro convertitore da SVG a PNG trasforma il disegno in un PNG trasparente nel tuo browser, alla larghezza in pixel che scegli. Il file non viene caricato e non lascia mai il tuo dispositivo.
Il testo compare con un font diverso
Per impostazione predefinita l'SVG non incorpora i font; se il sistema di chi guarda non ha il font, ne viene usato uno sostitutivo. Nel contesto di un'immagine non vengono caricati nemmeno i font esterni. Converti il testo in tracciati nel tuo programma di grafica oppure incorpora il font.
L'SVG ha la dimensione sbagliata o risulta tagliato nella pagina
Senza un viewBox, o con width/height fissi, il ridimensionamento non si comporta come previsto. Aggiungi all'elemento svg principale un viewBox che copra il disegno e imposta la dimensione via CSS.
Il file è più grande del previsto
I programmi di grafica scrivono nell'SVG metadati dell'editor, decimali in eccesso e livelli nascosti. Un ottimizzatore come SVGO li elimina. La compressione gzip o Brotli sul server riduce ancora di più l'SVG, che è testuale.
Mi serve il mio logo PNG in formato SVG
Un'immagine raster non si può davvero "convertire" in vettoriale; quello che fanno gli strumenti è la vettorializzazione: le forme vengono riconosciute e ridisegnate come contorni. I nostri strumenti da PNG a SVG e da JPG a SVG vettorializzano con un numero di colori da 2 a 8. I risultati sono buoni per loghi e disegni semplici e approssimativi per le foto. Con questi strumenti il file viene caricato sui nostri server tramite una connessione sicura, vettorializzato lì ed eliminato al più tardi entro 30 minuti.
Consigli per la conversione
- Conosci la dimensione di destinazione: quando trasformi un SVG in PNG, scegli la dimensione massima a cui l'immagine verrà mostrata, raddoppiata per gli schermi ad alta densità. Nel nostro strumento il lato più lungo può arrivare a 4096 pixel; se lasci vuota la larghezza, i disegni piccoli vengono scalati in modo che il lato più lungo misuri 1024 pixel.
- JPG per i contenuti fotografici: se l'SVG incorpora una foto e non ti serve la trasparenza, JPG o WebP pesano meno del PNG; puoi convertire il PNG in seguito con il convertitore di immagini.
- Favicon: se il tuo logo è un SVG, il generatore di favicon lo accetta e aggiunge
icon.svgal pacchetto. - Sorgente pulita per la vettorializzazione: quando crei un SVG da un PNG, parti da un'immagine ad alta risoluzione, con colori piatti e senza rumore.
Domande frequenti
Qual è la differenza tra SVG e PNG?
Un PNG ha un numero fisso di pixel e diventa sfocato quando lo ingrandisci. Un SVG descrive forme e viene ridisegnato in modo nitido a qualsiasi dimensione. L'SVG è adatto a loghi e icone; PNG o JPG sono adatti a foto e screenshot.
Un file SVG può contenere un virus?
L'SVG non è un programma eseguibile, ma può incorporare JavaScript. Gli script non vengono eseguiti quando l'SVG è mostrato come immagine (<img>), ma possono esserlo quando il file viene aperto direttamente nel browser. Esamina gli SVG di provenienza sconosciuta con un visualizzatore, oppure convertili in PNG, invece di aprirli direttamente.
Posso inserire un SVG in Word o PowerPoint?
Le versioni attuali di Microsoft Office supportano l'inserimento di SVG. Con versioni più vecchie, o se condividerai il file con altri programmi, una copia in PNG è più sicura.
Convertire un SVG in PNG fa perdere qualità?
Il PNG è senza perdita, ma il disegno viene fissato a una dimensione in pixel. Scegli una larghezza sufficiente e non noterai alcuna perdita; ingrandire il PNG in seguito lo renderà sfocato.
L'SVG supporta l'animazione?
Sì. Il movimento può arrivare da animazioni CSS, elementi di animazione SMIL e JavaScript. Convertendo in PNG ottieni un solo fotogramma.
