Introduzione a SVG

SVG (Scalable Vector Graphics) descrive grafica bidimensionale in XML. Invece di memorizzare una griglia di pixel colorati (come fanno JPEG, PNG o GIF), un file SVG memorizza le istruzioni per disegnare forme — linee, curve, cerchi, rettangoli e testo. Il browser legge quelle istruzioni e renderizza l'immagine aggiornata a qualsiasi dimensione in cui viene visualizzata, quindi il risultato rimane nitido a qualsiasi livello di zoom o risoluzione dello schermo.

SVG è una raccomandazione W3C e si integra con altri standard come il DOM, CSS e JavaScript. Poiché ogni forma è un elemento reale nel documento, puoi applicarle stili con CSS, animarla e rispondere ai clic e agli hover proprio come qualsiasi altro elemento HTML.

Questa pagina spiega come funziona SVG all'interno di una pagina HTML, come è strutturato il suo sistema di coordinate, quando preferire SVG rispetto a Canvas o a un'immagine raster, e i tre modi standard per incorporare un documento SVG.

Come funziona SVG in una pagina HTML

Un'immagine SVG è essa stessa un piccolo documento XML. L'elemento radice <svg> contiene gli elementi forma figli, e il browser li disegna nell'ordine in cui appaiono nel sorgente — gli elementi successivi vengono disegnati sopra quelli precedenti, nello stesso modo in cui i livelli si sovrappongono in un programma di disegno.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Il sistema di coordinate

SVG utilizza una griglia di coordinate il cui origine (0, 0) è nell'angolo in alto a sinistra. L'asse x cresce verso destra e l'asse y cresce verso il basso — nota che questo differisce dalla convenzione y verso l'alto che potresti conoscere dalla matematica.

• Gli attributi width e height su <svg> impostano la dimensione dell'area di disegno in pixel.
• Un attributo viewBox (ad esempio viewBox="0 0 100 100") definisce lo spazio di coordinate interno, permettendo allo stesso disegno di scalare per adattarsi a qualsiasi dimensione di rendering.

Nell'esempio sopra, il centro del cerchio si trova a (50, 50) — il centro di una tela 100×100 — e il suo raggio si estende di 40 unità in ogni direzione.

Leggere gli attributi di <circle>

Ogni attributo sull'elemento <circle> controlla un aspetto di come viene disegnato:

Scopri di più sulla colorazione dei contorni in SVG stroking, e consulta ogni forma e attributo nel riferimento SVG.

SVG vs. Canvas vs. immagini raster

La scelta della tecnologia giusta dipende da cosa stai disegnando e da come cambierà.

• SVG è la scelta migliore per grafiche che devono rimanere nitide a qualsiasi dimensione e che vuoi stilizzare, animare o rendere interattive: icone, loghi, grafici, diagrammi e mappe. Ogni forma è un nodo del DOM, quindi è accessibile e facile da manipolare con script. Può diventare lento quando una scena contiene decine di migliaia di elementi individuali.
• Canvas disegna pixel su una bitmap con JavaScript. Non ha un DOM per forma, il che lo rende efficiente per scene in rapido cambiamento con molti oggetti — giochi, effetti particellari e visualizzazioni di dati in tempo reale — ma il risultato non scala senza ridisegnare ed è più difficile da rendere accessibile.
• Le immagini raster (JPEG, PNG, GIF, WebP) memorizzano pixel fissi. Sono la scelta giusta per fotografie e texture complesse, ma si sfocano o si pixelano quando vengono ingrandite e pesano di più ad alte risoluzioni.

Una semplice regola pratica: usa SVG per arte vettoriale indipendente dalla risoluzione e manipolabile tramite script; usa Canvas per il rendering di pixel ad alta frequenza; usa i formati raster per le fotografie.

Incorporare SVG in HTML

I file SVG usano l'estensione .svg e sono supportati da tutti i browser moderni. Ci sono tre modi comuni per inserire SVG in una pagina, ognuno con i propri compromessi.

<svg> inline

Scrivi il markup SVG direttamente all'interno del tuo HTML. Questo ti dà accesso completo a ogni forma, quindi puoi applicare stili con CSS e animare o manipolare tramite script i singoli elementi dalla stessa pagina.

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>

<img> con sorgente SVG

Punta un elemento <img> a un file .svg esterno. Questo è semplice e memorizzabile nella cache, ma l'SVG viene trattato come un'immagine piatta: i suoi elementi interni non possono essere stilizzati o manipolati tramite script dalla pagina ospitante.

<img src="circle.svg" width="100" height="100" alt="A yellow circle outlined in green" />

L'elemento <object>

L'elemento <object> carica l'SVG come documento separato esponendo comunque il suo DOM agli script, e ti permette di fornire contenuto di fallback per i browser che non riescono a caricarlo.

<object data="circle.svg" type="image/svg+xml" width="100" height="100">
  Your browser does not support SVG.
</object>

Per ulteriori informazioni sull'elemento inline stesso, consulta il tag HTML <svg> e SVG in HTML5.

Creare immagini SVG

Puoi scrivere SVG a mano in qualsiasi editor di testo, il che è pratico per icone e forme semplici. Per opere d'arte con molte curve e tracciati, un programma di disegno come Inkscape è generalmente più comodo — esporta file .svg puliti che puoi poi raffinare a mano. Per disegnare forme curve tramite codice, inizia con l'elemento SVG path, e per segmenti retti consulta l'elemento SVG line.

Rendere SVG accessibile

Quando un SVG trasmette un significato, fornisci alle tecnologie assistive qualcosa da leggere. L'approccio dipende da come viene incorporato l'SVG:

• Per <svg> inline, aggiungi un <title> (e un <desc> più lungo opzionale) come primi figli, e contrassegna la radice con role="img". Fare riferimento al titolo con aria-labelledby collega il nome accessibile all'elemento.

<svg role="img" aria-labelledby="circleTitle"
     xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <title id="circleTitle">A yellow circle outlined in green</title>
  <desc>A solid yellow disk with a four-pixel green border, used as a status indicator.</desc>
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

• Per un SVG caricato tramite <img>, usa un attributo alt descrittivo, esattamente come faresti per qualsiasi immagine.
• Se la grafica è puramente decorativa, nascondila alle tecnologie assistive con aria-hidden="true" (inline) o un alt="" vuoto (su <img>) in modo che i lettori di schermo la saltino.

Puoi anche aggiungere testo accessibile all'interno di un disegno con l'elemento SVG text.

Vantaggi dell'utilizzo di SVG

Rispetto ai formati raster come JPEG e GIF, SVG offre diversi vantaggi:

• Le immagini SVG possono essere generate e modificate con qualsiasi editor di testo.
• Le immagini SVG possono essere manipolate tramite script, indicizzate, ricercate e compresse.
• Puoi stampare immagini SVG con alta qualità a qualsiasi risoluzione.
• Le immagini SVG possono essere scalate e ingrandite senza perdere qualità.
• Ogni forma fa parte del DOM, quindi può essere stilizzata con CSS e animata.
• SVG è uno standard W3C aperto.

Pratica