Cos'è SVG? Basi della grafica vettoriale, pro/contro e quando usarlo
Tutto quello che devi sapere sugli Scalable Vector Graphics — come funzionano, perché contano e quando sceglierli al posto dei formati raster.
Converti oraCos'è SVG?
Incontri file SVG ogni giorno — nei loghi dei siti web, nelle icone delle app, nelle illustrazioni animate e nei grafici interattivi. Ma cos'è esattamente un SVG, e perché è diventato il formato di riferimento per gran parte del web moderno?
SVG sta per Scalable Vector Graphics. È un formato immagine basato su XML che descrive gli elementi visivi usando istruzioni matematiche anziché una griglia di pixel colorati. Invece di memorizzare valori di colore per ogni punto sullo schermo, un file SVG contiene codice leggibile che definisce forme, tracciati, curve, colori e testo. Un browser o un visualizzatore di immagini legge quelle istruzioni e renderizza la grafica a qualsiasi dimensione necessaria — da un piccolo favicon a un cartellone — senza alcuna perdita di qualità.
La specifica SVG è mantenuta dal W3C (World Wide Web Consortium), la stessa organizzazione che sta dietro HTML e CSS. Questo significa che SVG è uno standard aperto con ampio supporto su tutti i browser moderni, sistemi operativi e strumenti di design. Poiché i file SVG sono testo semplice sotto il cofano, possono essere creati, modificati e versionati proprio come il codice sorgente.
Se hai un'immagine raster — un PNG, JPG o WebP — e vuoi trasformarla in vettoriale, un processo chiamato tracing può approssimare le forme originali come tracciati SVG. Any2SVG è un convertitore gratuito da immagine a SVG che esegue questo passaggio di tracing direttamente nel tuo browser usando Canvas e ImageTracer.js, così i tuoi file non lasciano mai il tuo dispositivo.
Come SVG si differenzia dalle immagini raster
La differenza fondamentale tra SVG e i formati raster come PNG, JPG o WebP si riduce a matematica vs. pixel. Un'immagine raster è una griglia fissa di punti colorati. Ingrandiscila oltre la sua risoluzione nativa e ottieni risultati sfocati e pixelati. Un file SVG, invece, memorizza istruzioni di disegno — "disegna un cerchio con questo centro e questo raggio" — così il renderer può ricalcolare ogni bordo alla dimensione desiderata.
Questa distinzione ha conseguenze pratiche su dimensione del file, modificabilità e prestazioni. Per un'analisi dettagliata, consulta la nostra guida Raster vs vettoriale: qual è la differenza?
| Caratteristica | SVG (Vettoriale) | Raster (PNG/JPG/WebP) |
|---|---|---|
| Definito da | Tracciati e forme matematiche | Una griglia di pixel colorati |
| Scalabilità | Infinita — nessuna perdita di qualità | La qualità degrada quando ingrandito |
| Dimensione del file (grafica semplice) | Molto piccola (spesso sotto 5 KB) | Più grande a causa dei dati pixel |
| Dimensione del file (foto) | Molto grande e impraticabile | Efficiente con compressione lossy |
| Modificabilità | Modifica forme, colori, testo nel codice o negli strumenti di design | Solo editing a livello di pixel |
| Animazione | Animazione CSS e SMIL integrate | Richiede GIF, APNG o video |
| Accessibilità | Supporta titoli, descrizioni, ruoli ARIA | Limitato al testo alternativo |
Poiché SVG è basato su testo, puoi aprirlo in un editor di codice, cambiare un valore di colore, regolare un tracciato o aggiungere un'animazione — tutto senza software specializzato. Questo rende gli SVG particolarmente preziosi nei design system dove coerenza e automazione contano.
Pro e contro di SVG
Vantaggi
- Scalabilità perfetta. Gli SVG vengono renderizzati in modo nitido su qualsiasi schermo — dai monitor a bassa densità ai display Retina 4K — senza generare multiple dimensioni di immagine.
- Dimensione del file ridotta per grafiche semplici. Un logo o un'icona come SVG è spesso una frazione della dimensione del suo equivalente PNG, il che significa caricamento più veloce delle pagine.
- Completamente modificabile. Cambia colori, tratti o forme modificando attributi XML. Token di design e temi possono essere applicati programmaticamente.
- Animabile. Gli elementi SVG possono essere animati con transizioni CSS, SMIL o librerie JavaScript come GSAP — senza bisogno di file video o sprite sheet.
- Accessibile. SVG supporta gli elementi
<title>e<desc>oltre agli attributi ARIA, fornendo agli screen reader informazioni significative sulla grafica. - SEO-friendly. I motori di ricerca possono indicizzare il contenuto testuale all'interno degli SVG, e gli SVG inline contribuiscono alla semantica della pagina.
Svantaggi
- Non adatto per le fotografie. Rappresentare milioni di variazioni di colore con tracciati vettoriali produce file enormi e impraticabili. Per le foto, JPG o WebP rimangono molto più efficienti.
- La complessità cresce con il dettaglio. Illustrazioni molto dettagliate con migliaia di tracciati possono produrre SVG grandi, lenti da analizzare e renderizzare.
- Curva di apprendimento. Modificare manualmente il codice SVG richiede familiarità con la sintassi XML, i comandi dei tracciati e i sistemi di coordinate.
- Considerazioni sulla sicurezza. Poiché SVG può contenere script, gli SVG caricati dagli utenti devono essere sanitizzati prima di essere serviti su una pagina web.
Per un confronto formato per formato, leggi il nostro confronto SVG vs PNG.
Quando usare SVG
La scelta del formato immagine giusto dipende dal contenuto. SVG eccelle in scenari specifici e risulta inadeguato in altri. La tabella qui sotto offre una guida rapida alla scelta.
| Caso d'uso | SVG consigliato? | Perché |
|---|---|---|
| Loghi e marchi | Sì | Devono essere nitidi a ogni dimensione, dai favicon alla stampa |
| Icone ed elementi UI | Sì | Dimensione file minima, personalizzabili con CSS, indipendenti dalla risoluzione |
| Illustrazioni e infografiche | Sì | Scalabili, animabili, modificabili dopo l'esportazione |
| Grafici e visualizzazioni dati | Sì | Generati programmaticamente, interattivi con JS |
| Fotografie | No | I formati raster gestiscono i toni continui in modo molto più efficiente |
| Texture o sfumature complesse | Raramente | Il numero di tracciati esplode, annullando i vantaggi di dimensione e prestazioni |
Se hai un logo o un'icona PNG che ti serve in formato vettoriale, il nostro tutorial da PNG a SVG ti guida passo-passo nella conversione. Il processo è semplice: carica la tua immagine, regola le impostazioni di tracing e scarica un SVG pulito — tutto nel browser.
Inizia a convertire
SVG è lo standard moderno per la grafica web scalabile, leggera e accessibile. Che tu stia costruendo un design system, ottimizzando la velocità della pagina o semplicemente abbia bisogno di un logo nitido su ogni dispositivo, SVG è la scelta giusta per tutto ciò che non è una fotografia.
Pronto a trasformare le tue immagini raster in vettori puliti? Any2SVG converte file PNG, JPG, WebP, GIF, BMP, TIFF e AVIF in SVG direttamente nel tuo browser — nessun upload su un server remoto, nessun account richiesto, nessun limite di file. Regola quantizzazione dei colori, semplificazione dei tracciati e dimensione dell'output, poi scarica singoli SVG o un archivio ZIP in batch.