SVG in HTML5

SVG (Scalable Vector Graphics) è un formato basato su XML per descrivere grafica bidimensionale come forme — punti, linee, curve e testo — invece di una griglia di pixel. Poiché il browser disegna un SVG a partire da una descrizione matematica, rimane nitidissimo a qualsiasi dimensione e su qualsiasi densità di schermo: ecco perché icone, loghi, grafici e diagrammi vengono spesso distribuiti come SVG.

HTML5 offre diversi modi per inserire SVG in una pagina, ognuno con compromessi diversi in termini di accesso al DOM, caching, stile e fallback. Questa pagina illustra tutti i metodi di incorporamento più comuni e ti aiuta a scegliere tra di essi.

Se sei nuovo al formato, inizia dall'introduzione a SVG. Per un elenco completo di elementi e attributi, consulta il riferimento SVG.

SVG inline

Il metodo più potente è scrivere il markup SVG direttamente nell'HTML. Poiché l'SVG diventa parte del documento, ogni forma è un vero nodo DOM: puoi stilizzarla con CSS, manipolarla con JavaScript e rispondere agli eventi su singoli path.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200" viewBox="0 0 300 200"
         xmlns="http://www.w3.org/2000/svg"
         role="img" aria-labelledby="circleTitle">
      <title id="circleTitle">A pink circle outlined in purple</title>
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>

Provalo tu stesso »

Analizziamo il codice:

Un SVG inline inizia sempre con il tag <svg> e termina con </svg>.
width e height impostano le dimensioni del riquadro SVG nella pagina (in pixel CSS).
viewBox="0 0 300 200" definisce il sistema di coordinate interno: i valori sono min-x min-y width height. Il browser scala queste unità utente per adattarle ai valori width/height visualizzati, quindi il viewBox è ciò che rende la grafica davvero scalabile e responsiva. (Rimuovendo width/height, l'SVG si espanderà per riempire il suo contenitore mantenendo le proporzioni del viewBox.)
xmlns="http://www.w3.org/2000/svg" dichiara il namespace SVG. È obbligatorio quando l'SVG viene servito come file .svg autonomo; all'interno di HTML5 il browser di solito lo inferisce, ma includerlo rende il markup più portabile.
L'elemento <circle> disegna un cerchio. cx e cy sono le coordinate x/y del suo centro (il valore predefinito è 0,0 se omessi) e r è il raggio.
stroke e stroke-width controllano il contorno — qui un bordo viola da 5px. fill imposta il colore interno, in questo caso rosa.

SVG dispone di un insieme di elementi di forme base che si combinano per costruire una grafica. Consulta l'elenco degli elementi forma SVG qui sotto.

Pericolo

SVG è XML, quindi ogni elemento deve essere correttamente chiuso. I tag auto-chiudenti come <circle ... /> richiedono la barra finale, e i tag contenitore come <svg> richiedono un </svg> corrispondente.

Accessibilità per SVG inline

Gli SVG decorativi possono essere nascosti alle tecnologie assistive con aria-hidden="true". Quando la grafica trasmette un significato, è necessario esporlo:

Aggiungi role="img" affinché gli screen reader trattino l'intero <svg> come una singola immagine.
Fornisci un <title> (un nome accessibile breve) e, se necessario, un <desc> (una descrizione più lunga), quindi riferisciti a essi con aria-labelledby.

<svg viewBox="0 0 100 100" role="img" aria-labelledby="t d"
     xmlns="http://www.w3.org/2000/svg">
  <title id="t">Sales chart</title>
  <desc id="d">Bar chart showing a 20% rise in Q4 sales.</desc>
  <rect x="10" y="40" width="20" height="50" fill="teal" />
</svg>

Nota che <title> e <desc> sono elementi SVG speciali, non testo visibile — <title> non è lo stesso del <title> HTML nell'intestazione del documento.

Incorporare un file `.svg` esterno

Il markup inline appesantisce l'HTML e non può essere memorizzato nella cache separatamente. Quando hai un asset riutilizzabile, mantieni l'SVG nel suo file file.svg e riferisciti a esso. Esistono quattro modi comuni per farlo.

Come immagine con `<img>`

L'approccio più semplice e ampiamente supportato. L'SVG si comporta come qualsiasi altra immagine: viene memorizzato nella cache, supporta il caricamento lazy ed è facile da usare.

<img src="logo.svg" width="120" height="40" alt="Company logo" />

Compromessi: non è possibile accedere all'interno dell'SVG dal CSS o JavaScript della pagina, e gli script all'interno dell'SVG non vengono eseguiti. Di solito è esattamente ciò che si desidera per icone e loghi. Fornisci sempre il testo alt. Consulta la guida HTML <img> e immagini.

Come oggetto con `<object>`

<object> carica l'SVG come documento separato, quindi i suoi script interni vengono eseguiti e puoi accedervi tramite contentDocument. Offre anche un naturale contenuto di fallback tra i tag.

<object type="image/svg+xml" data="diagram.svg" width="300" height="200">
  <img src="diagram.png" alt="Diagram fallback" />
</object>

Compromessi: lo scripting oltre il confine è soggetto alla same-origin policy (CORS), e lo stile dell'SVG dal foglio di stile della pagina principale non si applica. Leggi di più nel capitolo tag HTML <object>.

Come elemento embed con `<embed>`

<embed> carica anch'esso l'SVG come documento esterno. È simile a <object> ma non può fornire contenuto di fallback (non ha tag di chiusura né nodi figli).

<embed type="image/svg+xml" src="diagram.svg" width="300" height="200" />

Preferisci <object> rispetto a <embed> quando hai bisogno di un fallback. Consulta il capitolo tag HTML <embed> per i dettagli.

Come CSS `background-image`

Quando l'SVG è puramente decorativo, impostalo come sfondo CSS. Viene memorizzato nella cache e mantiene l'HTML pulito, ma è invisibile alle tecnologie assistive e irraggiungibile dagli script.

<style>
  .hero {
    width: 300px;
    height: 200px;
    background-image: url("pattern.svg");
    background-size: cover;
  }
</style>
<div class="hero"></div>

È anche possibile incorporare un piccolo SVG come data URI: background-image: url('data:image/svg+xml,...').

SVG inline vs. file esterno

Funzionalità	`<svg>` inline	Esterno (`img`/`object`/`embed`/CSS)
Stilizzare le forme con CSS della pagina	Sì	No (solo `<object>`/`<embed>` tramite CSS interno)
Manipolare singole forme dalla pagina con script	Sì	Limitato / bloccato da CORS
Memorizzato nella cache separatamente dall'HTML	No	Sì
Riutilizzabile su più pagine senza copia-incolla	No	Sì
Mantiene l'HTML leggero	No	Sì

Regola pratica: usa SVG inline quando hai bisogno di animare, tematizzare o interagire con la grafica (icone che cambiano colore al passaggio del mouse, grafici interattivi). Usa un <img src="*.svg"> esterno per loghi statici e immagini decorative riutilizzate in tutto il sito.

SVG vs. immagini raster

SVG è un formato vettoriale; PNG, JPEG, GIF e WebP sono formati raster (a pixel).

Indipendenza dalla risoluzione. SVG scala a qualsiasi dimensione senza sfocature e senza file @2x/@3x separati — ideale per icone, loghi e grafica lineare su schermi ad alta DPI.
File piccoli per grafica semplice. Le grafiche piatte con poche forme sono spesso molto più leggere come SVG, e il testo al loro interno rimane selezionabile e ricercabile.
Modificabile e scriptabile. SVG è testo, quindi si confronta con il controllo di versione e può essere animato.

Quando SVG è la scelta sbagliata: fotografie e immagini ricche di dettagli. Una foto descritta come migliaia di forme sarebbe enorme e lenta da renderizzare — usa JPEG o WebP in questi casi. SVG eccelle per geometrie nitide, mentre effetti complessi per singolo pixel appartengono ai formati raster o all'elemento <canvas>.

Elementi forma SVG

L'SVG inline fornisce un insieme di forme predefinite che si combinano per creare grafici:

rettangolo <rect> — rettangoli e rettangoli con angoli arrotondati
cerchio <circle> — cerchi definiti da un centro e un raggio
ellisse <ellipse> — ovali con raggi x/y separati
linea <line> — un segmento retto tra due punti
polilinea <polyline> — una serie connessa di segmenti retti
poligono <polygon> — una forma chiusa da un elenco di punti
path <path> — linee e curve arbitrarie, la forma più flessibile

Vedi anche

Esercitati

Pratica

Quale metodo consente di stilizzare e manipolare con script singole forme SVG usando CSS e JavaScript della pagina?

Scrivere l'SVG inline con un elemento <svg> nell'HTML.Incorporare l'SVG con <img src='logo.svg'>.Impostare l'SVG come CSS background-image.Referenziare il file SVG con <embed>.