Tag HTML <svg>

Definizione e uso

<svg> Il tag definisce il contenitore delle immagini SVG.

SVG ha molti metodi per disegnare percorsi, cornici, cerchi, testi e immagini grafiche.

Per imparare di più su SVG, leggi il nostro Tutorial SVG.

Vedi anche:

Corso HTML:HTML SVG

Corso SVG:Tutorial SVG

Esempio

Esempio 1

Disegna un cerchio:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Prova personalmente

Esempio 2

Disegna un rettangolo:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Prova personalmente

Esempio 3

Disegna un quadrato arrotondato:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Prova personalmente

Esempio 4

Disegna una stella:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Prova personalmente

Esempio 5

Disegna il logo SVG:

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

Prova personalmente

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1