Cos'è il formato SVG? Guida tecnica completa per il 2026

Il W3C definisce SVG come «un linguaggio per descrivere grafica bidimensionale in XML.» Essendo XML, ogni SVG è un documento strutturato che puoi aprire in un editor di testo, manipolare con JavaScript e validare contro uno schema. Nessun altro formato immagine comune offre questo.

«SVG è il formato immagine nativo del web. Non vive solo sul web — è il web.» — Chris Coyier

Anatomia SVG: struttura XML e viewBox

Ogni SVG inizia con un elemento radice <svg>. Comprendere i suoi attributi è la chiave per padroneggiare il formato.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 100"
     width="400" height="200">
  <rect x="10" y="10" width="180" height="80" rx="8"
        fill="#0f172a" stroke="#38bdf8" stroke-width="2"/>
  <text x="100" y="58" text-anchor="middle"
        fill="#f8fafc" font-size="18">Ciao, SVG!</text>
</svg>

• xmlns dichiara il namespace SVG — richiesto nei file .svg autonomi, opzionale in inline in HTML5
• viewBox="0 0 200 100" definisce il sistema di coordinate interno: origine a (0,0), 200 unità di larghezza, 100 di altezza
• width/height impostano la dimensione di rendering; il browser mappa il viewBox su questo viewport

Il viewBox disaccoppia lo spazio di coordinate dalle dimensioni in pixel. Un'icona con viewBox="0 0 24 24" viene renderizzata in modo identico a 16px o 512px — il browser scala il sistema di coordinate. Ecco perché SVG scala all'infinito.

SVG usa un sistema di coordinate con asse Y che punta verso il basso (come CSS e Canvas), origine in alto a sinistra.

Storia: W3C, guerre dei browser e adozione moderna

• 1998: Il W3C forma il gruppo di lavoro SVG, unendo le proposte PGML di Adobe e VML di Microsoft
• 2001: SVG 1.0 diventa una raccomandazione W3C
• 2003: SVG 1.1 raffina e modularizza la specifica
• 2011: SVG 1.1 Seconda Edizione — la versione che la maggior parte dei browser implementa completamente
• 2018: SVG 2.0 raggiunge il Candidate Recommendation, allineandosi con CSS e HTML

La saga di IE

IE 8 e precedenti avevano zero supporto SVG. IE 9 (2011) ha introdotto il rendering di base ma con lacune: nessuna animazione SMIL, filtri limitati, bug del viewBox. Il vero punto di svolta è arrivato quando Microsoft ha ritirato IE in favore di Edge (Chromium) nel 2022. Oggi SVG ha un supporto browser globale del 98,5%.

Riferimento degli elementi SVG

SVG inline vs img vs background CSS vs object

Scegli inline quando hai bisogno di stati hover, animazione o interazione JS. Scegli <img> per asset statici da mettere in cache. Usa background CSS solo per decorazione. L'approccio <object> è raramente la scelta migliore nel 2026.

Accessibilità: role, aria-label, title, desc

SVG ha un'accessibilità di prima classe integrata nella specifica:

<svg role="img" aria-labelledby="logoTitle logoDesc"
     viewBox="0 0 120 40">
  <title id="logoTitle">Logo VectoSolve</title>
  <desc id="logoDesc">Monogramma geometrico V e S in gradiente blu</desc>
  <path d="M10 35L30 5L50 35Z" fill="url(#grad)"/>
</svg>

• role="img" — indica alla tecnologia assistiva che è un'immagine
• <title> — il nome accessibile (equivalente di alt su <img>)
• <desc> — descrizione più lunga per grafici complessi
• aria-labelledby — collega agli elementi <title> e <desc>
• aria-hidden="true" — usalo su SVG puramente decorativi per nasconderli dagli screen reader

Animazione: SMIL, CSS, JavaScript, Web Animations API

SMIL (animazione nativa SVG)

<circle cx="50" cy="50" r="20" fill="#ef4444">
  <animate attributeName="r" values="20;35;20" dur="1.5s" repeatCount="indefinite"/>
</circle>

Animazioni CSS

Applica @keyframes, transition e transform agli elementi SVG — lo stesso CSS che già conosci.

Librerie JavaScript

GSAP, Anime.js e Snap.svg forniscono controllo basato su timeline per morphing di tracciati complessi e animazioni sequenziate.

Web Animations API

L'approccio moderno basato su standard, che combina la potenza di JS con le prestazioni CSS:

element.animate(
  [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
  { duration: 2000, iterations: Infinity }
);

Ottimizzazione delle prestazioni

Gli SVG dagli strumenti di design sono appesantiti — metadati dell'editor, gruppi ridondanti, precisione decimale eccessiva.

Tecniche chiave: rimuovere metadati dell'editor, ridurre la precisione delle coordinate a 1-2 decimali, appiattire gli elementi <g> annidati, usare viewBox invece di dimensioni fisse, abilitare GZIP/Brotli (SVG si comprime eccezionalmente bene) e automatizzare con l'ottimizzatore di VectoSolve.

Inizia con SVG

VectoSolve offre strumenti alimentati dall'IA per il workflow SVG completo:

• Convertire raster in vettore — carica PNG/JPG, ottieni SVG pulito e ottimizzato
• Modificare visualmente — usa l'editor SVG per regolare tracciati e colori
• Ottimizzare — passa i tuoi file attraverso l'ottimizzatore per eliminare il superfluo

SVG è il linguaggio grafico nativo del web — aperto, standardizzato, accessibile, animabile e performante. Nel 2026, la padronanza di SVG non è opzionale. È fondamentale.

Fonti e approfondimenti

• MDN Web Docs: SVG — Riferimento completo per ogni elemento, attributo e API SVG
• Specifica W3C SVG 2 — Lo standard ufficiale W3C che definisce sintassi, rendering e interattività SVG
• CSS-Tricks: Using SVG — Guida pratica per incorporare, stilizzare e ottimizzare SVG sul web
• web.dev Performance — Risorsa Google sull'ottimizzazione delle immagini e Core Web Vitals
• Smashing Magazine — Articoli approfonditi su accessibilità SVG, animazione e best practice