In HTML5, è possibile incorporare elementi SVG direttamente nelle tue pagine HTML.
Incorpora SVG direttamente nelle pagine HTML
Ecco un esempio di un semplice grafico 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> Prova tu stesso " SVG Code explanation:
- Un'immagine SVG inizia con un <svg> elemento
- La larghezza e l'altezza attributi del <svg> elemento definire la larghezza e l'altezza dell'immagine SVG
- Il <circle> elemento viene utilizzato per disegnare un cerchio
- Gli attributi CX e CY definiscono le coordinate x e y del centro del cerchio. Se cx e cy sono omessi, il centro del cerchio è impostato su (0, 0)
- Il r attributo definisce il raggio del cerchio
- Gli attributi di tratto e ictus larghezza controllano come appare il contorno di una forma. Abbiamo impostato il contorno del cerchio per un 4px verde "confine"
- Il fill di attributo si riferisce al colore all'interno del cerchio. Abbiamo impostato il colore di riempimento al giallo
- La chiusura </svg> tag chiude l'immagine SVG
Nota: Dal momento che SVG è scritto in XML, tutti gli elementi devono essere correttamente chiusi!