SVG: cos'è, concetti chiave e utilizzo nello sviluppo web

Cos'è SVG?

SVG è un formato di grafica vettoriale basato su XML, introdotto nel 2001 come raccomandazione W3C. A differenza dei formati raster, SVG descrive le immagini attraverso primitive geometriche: punti, linee, curve e poligoni. Un file SVG è un documento XML di testo semplice che può essere letto, modificato e compresso con strumenti standard.

L'architettura SVG include diversi concetti chiave. viewBox definisce un sistema di coordinate virtuale indipendente dalle dimensioni effettive dell'elemento. Ad esempio, viewBox="0 0 100 100" crea una griglia quadrata 100×100, all'interno della quale tutte le coordinate sono fisse. Quando la larghezza o l'altezza del contenitore cambia, il contenuto si ridimensiona proporzionalmente.

Secondo la W3C SVG 2 Specification, la versione moderna di SVG supporta gradienti, maschere, filtri, testo con posizionamento arbitrario, interattività tramite JavaScript e animazioni tramite CSS e SMIL. SVG è integrato nel DOM come elemento HTML completo, consentendo il controllo programmatico su ogni primitiva grafica.

Nello sviluppo mobile, SVG viene utilizzato anche in iOS tramite UIGraphicsImageRenderer e in Android tramite VectorDrawable — entrambi i formati convertono descrizioni simili a SVG in raster accelerati via hardware sulla GPU.

Storia ed evoluzione del formato SVG

SVG 1.0 è diventato una raccomandazione W3C nel 2001, SVG 1.1 nel 2003 e SVG 2.0 è in sviluppo dal 2012. L'innovazione principale di SVG 2 è l'integrazione più profonda con CSS, il supporto per modalità di compositing e blending e la possibilità di utilizzare SVG in HTML senza prefissi di namespace.

Sebbene SVG 2 non abbia ancora raggiunto lo status di Raccomandazione, i browser moderni supportano già la maggior parte delle sue funzionalità. Chrome, Safari, Firefox ed Edge hanno un supporto quasi completo per SVG 1.1 e una parte significativa di SVG 2.

Elementi di base di SVG

SVG fornisce un insieme di elementi per descrivere grafica bidimensionale. Ogni elemento ha attributi che definiscono posizione, dimensione e aspetto visivo. Gli attributi possono essere impostati come attributi xml o tramite proprietà CSS.

• <rect> — rettangolo con attributi x, y, width, height, rx, ry (arrotondamento angoli).
• <circle> — cerchio con attributi cx, cy (centro) e r (raggio).
• <ellipse> — ellisse con attributi cx, cy, rx, ry.
• <line> — segmento di linea con attributi x1, y1, x2, y2.
• <polyline> — linea spezzata con attributo points (elenco coordinate).
• <polygon> — poligono chiuso con attributo points.
• <path> — percorso arbitrario con attributo d (comandi: M, L, C, Q, A, Z).
• <text> — elemento di testo con attributi x, y, font-size, font-family.

L'elemento path è l'elemento SVG più potente e flessibile. L'attributo d contiene una sequenza di comandi: M (moveTo), L (lineTo), C (curva di Bezier cubica), Q (curva di Bezier quadratica), A (arco), Z (chiudi percorso). Ogni comando ha una forma assoluta o relativa (lettera maiuscola o minuscola).

SVG supporta anche il raggruppamento di elementi tramite <g>. Il gruppo eredita gli attributi visivi (fill, stroke, transform) a tutti gli elementi figli. Ciò consente di applicare uno stile unico a un intero insieme di forme e controllare la loro posizione tramite un singolo transform.

SVG vs grafica raster: confronto formati

La differenza principale tra SVG e i formati raster (JPEG, PNG, WebP) è il modo di memorizzare le informazioni. Il raster memorizza il colore di ogni pixel in una griglia di dimensione fissa. SVG memorizza comandi matematici per riprodurre le forme. Questa differenza determina tutti i vantaggi e svantaggi dei formati.

Secondo HTTP Archive, 2025, il 68% dei siti web utilizza SVG per le icone, il 34% per le illustrazioni e il 22% per i loghi. La dimensione media di un'icona SVG è di 0.5–2 KB, mentre un'icona raster di qualità simile occupa 5–20 KB in formato PNG.

SVG non è adatto per fotografie e immagini raster complesse — la dimensione della descrizione XML supererebbe il JPEG equivalente. Ambiti di applicazione consigliati per SVG: icone, loghi, illustrazioni, diagrammi, grafici, elementi di interfaccia con design adattivo.

Quando scegliere SVG e quando scegliere il formato raster

SVG è la scelta ottimale per gli elementi di interfaccia che devono apparire nitidi sui display Retina e a qualsiasi livello di zoom del browser. Il raster è per fotografie, texture complesse e immagini con milioni di colori dove la descrizione vettoriale sarebbe eccessivamente complessa.

Approccio ibrido — combinare SVG per gli elementi di interfaccia e WebP/AVIF per i contenuti fotografici — offre il miglior equilibrio tra qualità e prestazioni di caricamento della pagina.

SVG inline e styling CSS

SVG inline consiste nell'incorporare il markup SVG direttamente in un documento HTML, anziché come file separato tramite <img> o background-image. Il vantaggio di SVG inline è che gli elementi SVG diventano parte del DOM e possono essere stilizzati tramite CSS, controllati tramite JavaScript e animati senza richieste aggiuntive al server.

A differenza di <img src="icon.svg">, dove SVG è isolato nello shadow DOM, SVG inline eredita i colori e i font dal documento padre. Ciò consente di implementare, ad esempio, il cambio di colore di un'icona al passaggio del mouse tramite la pseudo-classe CSS :hover senza caricare un file separato per ogni stato.

Secondo CSS-Tricks, SVG inline è il metodo consigliato per utilizzare le icone nelle applicazioni web moderne. Le proprietà CSS fill, stroke, stroke-width si applicano direttamente agli elementi SVG. Per la personalizzazione tramite CSS, è importante che l'SVG originale non abbia fill e stroke impostati come attributi inline — altrimenti CSS non può sovrascriverli.

• Vantaggi: styling tramite CSS, controllo tramite JS, nessuna richiesta HTTP, adattabilità del viewBox.
• Svantaggi: aumento delle dimensioni della pagina HTML, impossibilità di caching separato dall'HTML.
• Alternativa: sprite SVG — combinare più SVG in un unico file e utilizzare <use href="#id">.

Gli sprite SVG risolvono il problema del caching: tutte le icone sono raggruppate in un unico file, il browser lo carica una volta e le singole icone sono accessibili tramite <use> specificando l'id dell'elemento desiderato all'interno dello sprite.

Animazione SVG: CSS e SMIL

Animazione SVG con CSS è il modo più comune e performante per animare grafica vettoriale nel browser. Le proprietà CSS come transform, opacity e fill si applicano agli elementi SVG proprio come agli elementi HTML. Per l'animazione lungo un percorso arbitrario si usa la proprietà CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) è un meccanismo di animazione integrato in SVG, indipendente da CSS. Gli elementi <animate>, <animateTransform> e <animateMotion> consentono di animare qualsiasi attributo SVG senza JavaScript o CSS. L'animazione SMIL è garantita per essere sincronizzata con il frame rate del browser.

Secondo MDN Web Docs, SMIL è supportato in tutti i browser moderni, ma l'animazione CSS è considerata più prevedibile e performante. Il caso d'uso principale di SMIL è animare attributi non accessibili tramite CSS, come d (path) dell'elemento <path>.

JavaScript + requestAnimationFrame offre il massimo controllo sull'animazione SVG. Gli sviluppatori web utilizzano librerie come GSAP e Anime.js per sequenze di animazione complesse con timeline e funzioni di easing difficili da implementare con CSS puro.

Esempi di codice: creazione di grafica SVG

Il primo esempio è un'icona di casa semplice utilizzando elementi SVG di base. Tutte le forme sono rect e polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Il secondo esempio mostra un'animazione di rotazione di un loader tramite CSS. Utilizza <circle> con l'attributo stroke-dasharray per creare un contorno tratteggiato:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Il terzo esempio utilizza la libreria GSAP per animare un percorso per disegnare un contorno in modo fluido. GSAP lavora con l'attributo stroke-dashoffset, creando un effetto di comparsa della linea:

// Disegna percorso con GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});