SVG in HTML
Puoi incorporare elementi SVG direttamente nelle tue pagine HTML.
Incorpora SVG direttamente nelle pagine HTML
Ecco un esempio di una semplice grafica SVG:
ed ecco il codice HTML:
Esempio
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Spiegazione del codice SVG:
- Un'immagine SVG inizia con un elemento <svg>
- Gli attributi di larghezza e altezza dell'elemento <svg> definiscono la larghezza e l'altezza dell'immagine SVG
- L'elemento <cerchio> viene utilizzato per disegnare un cerchio
- Gli attributi cx e cy definiscono le coordinate xey del centro del cerchio. Se cx e cy non sono impostati, il centro del cerchio è impostato su (0, 0)
- L'attributo r definisce il raggio del cerchio
- Gli attributi tratto e larghezza tratto controllano come appare il contorno di una forma. Impostiamo il contorno del cerchio su un "bordo" verde di 4px
- L'attributo riempimento si riferisce al colore all'interno del cerchio. Impostiamo il colore di riempimento su giallo
- Il tag di chiusura </svg> chiude l'immagine SVG
Nota: poiché SVG è scritto in XML, tutti gli elementi devono essere chiusi correttamente!