SVG nell'HTML

Puoi incorporare direttamente l'elemento SVG nella pagina HTML.

Incorpora SVG direttamente nella pagina HTML

Di seguito è riportato un esempio di grafica SVG semplice:

Mi dispiace, il tuo browser non supporta SVG inline.

Questo è il codice HTML:

<!DOCTYPE html>
<html>
<body>
<h1>Il mio primo SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Prova tu stesso

Esempio di codice SVG:

  • L'immagine SVG inizia con l'elemento <svg>
  • Gli attributi width e height dell'elemento <svg> definiscono la larghezza e l'altezza dell'immagine SVG
  • L'elemento <circle> viene utilizzato per disegnare cerchi
  • Gli attributi cx e cy definiscono le coordinate x e y del centro del cerchio. Se non vengono impostati cx e cy, il centro del cerchio viene impostato su (0, 0)
  • L'attributo r definisce il raggio del cerchio
  • L'attributo stroke e stroke-width controllano il modo in cui viene visualizzata la contorno della forma. Stiamo impostando il contorno del cerchio come un 'bordo' verde di 4 pixel
  • L'attributo fill imposta il colore all'interno del cerchio. Stiamo impostando il colore di riempimento in giallo
  • Chiusura del tag </svg> dell'immagine SVG

Attenzione: poiché l'SVG è scritto in XML, tutti gli elementi devono essere chiusi correttamente!