Tag HTML svg - Impara HTML

Il tag <svg> viene utilizzato come contenitore per la grafica SVG.

SVG (Scalable Vector Graphics) è un linguaggio per la grafica bidimensionale basato su XML. A differenza dei formati raster come PNG o JPEG, un'immagine SVG è descritta da forme e coordinate anziché da una griglia fissa di pixel, quindi rimane nitida a qualsiasi dimensione e si ridimensiona senza perdere qualità. SVG supporta anche l'interattività, le animazioni e l'accesso completo a ciascun elemento tramite il DOM.

Questa pagina illustra come incorporare SVG direttamente in HTML, il fondamentale sistema di coordinate viewBox, le forme di disegno di base, come rendere SVG accessibile, gli attributi dell'elemento <svg> e come SVG si confronta con <canvas>.

Sintassi `<svg>`

Il tag <svg> è composto da una coppia di tag. Le forme da disegnare vengono scritte tra il tag di apertura (<svg>) e il tag di chiusura (</svg>).

Esempio del tag HTML `<svg>`:

Tag HTML <svg>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="display:flex; flex-flow:row wrap;">
      <svg width="180" height="180">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
      </svg>
      <svg width="200" height="200">
        <circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
      </svg>
      <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
      </svg>
    </div>
  </body>
</html>

Provalo tu stesso »

Pericolo

L'attributo xmlns è richiesto solo per l'elemento <svg> esterno nei documenti SVG autonomi (un file .svg). Non è richiesto per gli elementi <svg> interni né quando si incorpora SVG inline in un documento HTML.

Esempio del tag HTML `<svg>` che disegna un'ellisse:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
    </svg>
  </body>
</html>

Provalo tu stesso »

Il viewBox e il sistema di coordinate SVG

Il viewBox è il concetto più importante in SVG. Definisce il sistema di coordinate in cui vengono disegnate tutte le forme e ciò che rende un SVG davvero scalabile.

Gli attributi width e height impostano la dimensione del riquadro SVG sulla pagina (in pixel CSS). L'attributo viewBox, al contrario, definisce il sistema di coordinate interno tramite quattro numeri:

viewBox="min-x min-y width height"

min-x, min-y — le coordinate dell'angolo in alto a sinistra dell'area di visualizzazione.
width, height — la larghezza e l'altezza dell'area di visualizzazione in unità utente.

Il browser mappa quindi quell'area di visualizzazione interna sulla width/height sullo schermo, ridimensionando secondo necessità. Quindi un cerchio disegnato a cx="50" cy="50" con viewBox="0 0 100 100" si trova sempre al centro, indipendentemente da quanto grande venga renderizzato l'SVG.

L'esempio seguente disegna lo stesso cerchio in due SVG. Il primo si affida solo a width/height, quindi le coordinate sono in pixel e il cerchio è legato a quella dimensione. Il secondo aggiunge un viewBox, così il disegno si scala per riempire un riquadro molto più grande mentre il codice rimane identico:

<!-- No viewBox: coordinates are pixels, fixed 100×100 drawing -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

<!-- viewBox: same coordinates, but the 0 0 100 100 grid is
     stretched to fill a 300×300 box on the page -->
<svg width="300" height="300" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

Poiché il secondo SVG separa il sistema di coordinate (viewBox) dalla dimensione renderizzata (width/height), è possibile ridimensionarlo — anche con CSS — e ogni forma si scala proporzionalmente. Ecco perché il viewBox è essenziale per icone e illustrazioni responsive.

Forme SVG

I disegni SVG vengono costruiti da un piccolo insieme di elementi di forma di base collocati all'interno di <svg>. Ognuno utilizza i propri attributi di coordinate e dimensione:

<rect> — un rettangolo, posizionato con x/y e dimensionato con width/height; rx/ry arrotondano gli angoli. Vedi Rettangolo SVG.
<circle> — un cerchio definito dal suo centro cx/cy e raggio r. Vedi Cerchio SVG.
<ellipse> — come un cerchio ma con due raggi, rx e ry. Vedi Ellisse SVG.
<line> — una linea retta da (x1,y1) a (x2,y2). Vedi Linea SVG.
<polygon> — una forma chiusa definita da un elenco di points. Vedi Poligono SVG.
<path> — la forma più potente; il suo attributo d codifica linee, curve e archi per disegnare praticamente qualsiasi cosa. Vedi Path SVG.

La maggior parte delle forme condivide gli attributi di presentazione fill (colore interno), stroke (colore del contorno) e stroke-width (spessore del contorno). Per l'elenco completo di elementi e attributi, vedi il Riferimento SVG.

Accessibilità

L'SVG inline fa parte del DOM della pagina, quindi gli screen reader possono leggerlo — ma solo se si fornisce un testo accessibile. Una forma dall'aspetto decorativo senza etichetta non viene annunciata in modo utile.

Per SVG significativi (icone, grafici, loghi), procedere come segue:

Aggiungere un elemento <title> come primo figlio — funge da nome accessibile (e viene visualizzato come tooltip).
Aggiungere facoltativamente un elemento <desc> per una descrizione più lunga.
Inserire role="img" sull'<svg> affinché le tecnologie assistive lo trattino come una singola immagine.
Fare riferimento al testo con aria-labelledby, oppure usare direttamente aria-label.

<svg width="120" height="120" viewBox="0 0 120 120"
     role="img" aria-labelledby="logoTitle logoDesc">
  <title id="logoTitle">W3Docs logo</title>
  <desc id="logoDesc">A blue circle with a light gray center.</desc>
  <circle cx="60" cy="60" r="50" fill="#1c87c9" />
  <circle cx="60" cy="60" r="25" fill="lightgray" />
</svg>

Se un SVG è puramente decorativo e non aggiunge informazioni, nasconderlo alle tecnologie assistive con aria-hidden="true".

Differenze tra SVG e Canvas

A prima vista, sia SVG che Canvas fanno la stessa cosa: disegnano grafica vettoriale utilizzando coordinate. Tuttavia, ci sono differenze tra loro. Vediamole.

SVG è un linguaggio per descrivere grafica 2D in XML, mentre Canvas viene utilizzato per disegnare grafica 2D al volo (con JavaScript).

SVG è come un programma di "disegno vettoriale". Il disegno è un'istruzione per ciascuna forma e qualsiasi parte di qualsiasi forma può essere modificata. I disegni sono orientati alle forme.

Canvas è come un programma di "pittura". Quando i pixel raggiungono lo schermo, questo è il tuo disegno. È possibile modificare le forme solo sovrascrivendole con altri pixel. Le pitture sono orientate ai pixel.

SVG è basato su XML, il che significa che ogni elemento è disponibile all'interno del SVG DOM. In SVG, la forma disegnata viene memorizzata come oggetto. In Canvas, il browser dimentica immediatamente la forma disegnata dopo che è stata renderizzata. Se è necessario apportare modifiche al disegno, bisogna ridisegnarlo da zero.

Attributi

Attributo	Valore	Descrizione
height	lunghezza, percentuale	Definisce l'altezza dell'elemento SVG sulla pagina.
width	lunghezza, percentuale	Definisce la larghezza dell'elemento SVG sulla pagina.
viewBox	min-x min-y width height	Definisce la posizione e le dimensioni del sistema di coordinate interno (il viewport SVG).
preserveAspectRatio	allineamento + meetOrSlice (vedi sotto)	Controlla come il `viewBox` viene scalato e allineato quando il suo rapporto d'aspetto differisce dal riquadro SVG.
x	lunghezza, percentuale	Imposta la coordinata x di un contenitore SVG annidato. Non ha effetto sull'`<svg>` più esterno.
y	lunghezza, percentuale	Imposta la coordinata y di un contenitore SVG annidato. Non ha effetto sull'`<svg>` più esterno.

Valori di preserveAspectRatio

Quando il rapporto d'aspetto del viewBox non corrisponde a quello del riquadro SVG, preserveAspectRatio decide come adattarlo. Accetta un valore di allineamento opzionalmente seguito da un valore meetOrSlice:

Allineamento (a quale bordo/centro ancorare):

none — estende per riempire, ignorando il rapporto d'aspetto.
xMinYMin, xMidYMin, xMaxYMin
xMinYMid, xMidYMid (predefinito), xMaxYMid
xMinYMax, xMidYMax, xMaxYMax

Meet o slice (come scalare):

meet (predefinito) — scala finché l'intero viewBox si adatta al riquadro.
slice — scala finché il viewBox copre l'intero riquadro, ritagliando il contenuto in eccesso.

Attributi rimossi

Gli attributi version, baseProfile, contentScriptType e contentStyleType erano utilizzati in SVG 1.1 ma sono deprecati/rimossi in SVG 2 e non sono più necessari. SVG 2 è la revisione corrente della specifica SVG, più strettamente integrata con HTML e CSS; i browser moderni rendono SVG senza questi attributi.

Esercitati

Pratica

Quali affermazioni sul tag SVG sono corrette? (Seleziona tutte quelle applicabili)

Il tag SVG è un contenitore per la grafica vettoriale in HTML.La grafica SVG NON perde qualità quando viene ingrandita o ridimensionata.La grafica SVG è basata su pixel, come PNG o JPEG.L'attributo viewBox definisce il sistema di coordinate interno dell'SVG.L'attributo xmlns è richiesto per l'SVG inline all'interno di un documento HTML.

Sintassi <svg>

Esempio del tag HTML <svg>:

Esempio del tag HTML <svg> che disegna un'ellisse: