Vettore SVG (.svg)
W3C StandardScalable Vector Graphics (SVG) è un formato di immagine vettoriale basato su XML per grafica bidimensionale con supporto per interattività, stili CSS e animazioni.
Converti da SVG a PNG
Convertitore gratuito da SVG a PNG nel browser. Converti i file istantaneamente sul tuo dispositivo.
Comprimi SVG online
Privato - i file non lasciano mai il tuo dispositivo
Ispezione e metadati
I sistemi operativi e gli analizzatori di file identificano i file SVG ispezionando la sequenza di byte binari iniziale:
Firma dell'intestazione a livello di byte (Magic Bytes)
I sistemi operativi e gli analizzatori di file identificano i file SVG ispezionando la sequenza di byte binari iniziale:
FIRMA ESADECIMALE (OFFSET 0):
3C 73 76 67RAPPRESENTAZIONE ASCII: <svg
Standardizzazione: W3C Recommendation (SVG 1.1 / SVG 2)
Specifiche tecniche
| Architettura del contenitore | Documento di markup di testo basato su XML che definisce la geometria vettoriale 2D |
| Compressione | Compressione di testo Gzip / Brotli (SVGZ utilizza la compressione gzip) |
| Endianness dei byte | Non applicabile (Flusso di caratteri UTF-8 / UTF-16 basato su testo) |
| Spazi colore | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Canali e struttura | Forme vettoriali a risoluzione illimitata, curve di Bézier, tipografia e maschere di opacità |
| Dimensioni massime | Indipendente dalla risoluzione (si scala infinitamente a qualsiasi viewport senza sgranatura) |
| Trasparenza | Trasparenza alfa variabile completa e modalità di fusione CSS |
| Streaming e progressivo | Analisi incrementale del flusso di testo supportata dal parser XML del browser |
Matrice di confronto tecnico: SVG vs Concorrenti
| Attributo tecnico | SVG (Attuale) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Modello di rendering | DOM vettoriale in modalità mantenuta | Canvas bitmap in modalità immediata | Contenitore di pagine fisse in modalità mantenuta | Griglia di pixel raster |
| Stili e CSS | Completamente personalizzabile tramite classi e variabili CSS | Richiede ridisegni dell'API canvas JavaScript | Nessuno stile CSS dinamico | Pixel raster fissi |
| Scalabilità infinita | Sì (curve vettoriali matematiche) | Richiede il ridimensionamento manuale della risoluzione | Sì (elementi vettoriali) | No (si sgrana se ingrandito) |
| Interattività | Eventi DOM nativi (passaggio del puntatore, clic, animazioni) | Richiede calcoli manuali per rilevare le aree attive | Documento statico | Richiede image map o canvas |
Modalità di corruzione comuni e guida al recupero esadecimale
Il browser mostra XML Parsing Error: token non chiuso o tag non corrispondente.
Causa principale: Sintassi XML non valida, tag di chiusura mancanti o e commerciali non sottoposte a escape ('&' anziché '&').
Ripristino: Convalida con un linter XML (xmllint file.svg) e correggi i tag non bilanciati.
Analisi di sicurezza e vettori di attacco del parser
Poiché SVG è XML eseguibile che supporta tag '<script>' ed entità esterne, presenta significativi rischi XSS e SSRF se vengono visualizzati SVG non attendibili.
Vettori di attacco noti
- Stored Cross-Site Scripting (XSS) tramite tag '<script>' incorporati o gestori di eventi 'onload='.
- Attacchi XXE (XML External Entity) che leggono i file del server locale quando vengono analizzati sui server di backend.
- Espansione dell'entità XML Billion Laughs che causa il denial of service.
Migliori pratiche difensive: Sanifica sempre gli SVG utilizzando DOMPurify prima di incorporarli, oppure servi gli SVG con 'Content-Security-Policy: default-src 'none'' o come tag '<img>' che disabilitano automaticamente gli script.
Origini storiche e tappe fondamentali
Vantaggi principali
- Indipendenza dalla risoluzione infinita: linee e tipografia nitide su qualsiasi display o scala di stampa.
- Dimensione del file estremamente ridotta per loghi, icone ed elementi di interfaccia utente.
- Completamente programmabile e personalizzabile tramite CSS e JavaScript all'interno del DOM del browser.
Limiti tecnici e svantaggi
- Inadatto per fotografie o immagini complesse a tono continuo.
- I percorsi vettoriali complessi con migliaia di nodi possono causare rallentamenti del rendering della CPU e un elevato consumo della batteria.
- La natura XML consente script incorporati, richiedendo una rigorosa sanificazione prima di eseguire il rendering di caricamenti non attendibili.
Curiosità tecniche
- Gzip può ridurre notevolmente le dimensioni di alcuni file SVG; la riduzione dipende dal contenuto del documento e dalle impostazioni di compressione.
- L'attributo viewBox definisce un'area di disegno a coordinate astratte che si mappa dinamicamente ai pixel fisici dello schermo.
- I primi browser web inizialmente mancavano di motori SVG nativi, spingendo Adobe a distribuire il plugin per browser Adobe SVG Viewer prima che il supporto nativo dei browser si consolidasse intorno al 2011.
Domande tecniche frequenti
I file SVG possono contenere codice dannoso?
Sì. Poiché SVG è XML valido, può contenere JavaScript incorporato ('<script>') che viene eseguito se l'SVG viene caricato direttamente in un browser o aperto in un elemento '<svg>' incorporato. La distribuzione di SVG tramite un tag '<img>' neutralizza automaticamente l'esecuzione degli script.
Quando dovrei usare SVG invece di PNG?
Usa SVG per icone, loghi, grafici, illustrazioni e tipografia laddove siano richiesti un ridimensionamento nitido su schermi di qualsiasi dimensione e file di piccole dimensioni. Usa PNG o WebP per le fotografie.
Come posso ottimizzare file SVG grandi o complessi?
Puoi ripulire i tracciati vettoriali rimuovendo metadati ridondanti, commenti dell'editor (da Inkscape o Illustrator), gruppi invisibili e dichiarazioni di namespace non utilizzate utilizzando strumenti come SVGO o eseguendo la compressione SVG.
Coppie di conversione per SVG correlate
La conversione di file vettoriali SVG in immagini raster PNG trasforma la grafica scalabile basata su codice in griglie a pixel fissi per garantire la compatibilità con tutte le applicazioni.
Incapsula le immagini raster PNG all'interno di un contenitore vettoriale SVG XML per il ridimensionamento adattivo sul Web e l'integrazione in layout compatibili con la grafica vettoriale.
Converte i record di disegno vettoriale GDI di Windows a 16 bit in tracciati SVG moderni e scalabili senza perdita di risoluzione.
Converti la grafica Windows Enhanced Metafile a 32 bit in vettori SVG puliti e adattabili per il web e i software di progettazione.
La conversione di un disegno DXF in un file SVG da CAD trasforma dati vettoriali ingegneristici complessi in grafica XML leggera per browser web ed editor vettoriali.
La conversione della grafica vettoriale scalabile nel formato di interscambio dei disegni traduce vettori visivi pronti per il Web nelle precise coordinate matematiche richieste dai software di progettazione assistita da computer.
Condividi un logo o un\'illustrazione SVG come PDF di una pagina. I suoi tracciati scalabili diventano un\'immagine a risoluzione fissa, quindi lo zoom non può recuperare il dettaglio vettoriale.