SVG en HTML
Vous pouvez intégrer des éléments SVG directement dans vos pages HTML.
Intégrer SVG directement dans les pages HTML
Voici un exemple de graphique SVG simple :
et voici le code HTML :
Exemple
<!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>
Explication du code SVG :
- Une image SVG commence par un élément <svg>
- Les attributs width et height de l'élément <svg> définissent la largeur et la hauteur de l'image SVG
- L'élément <circle> est utilisé pour dessiner un cercle
- Les attributs cx et cy définissent les coordonnées x et y du centre du cercle. Si cx et cy ne sont pas définis, le centre du cercle est défini sur (0, 0)
- L'attribut r définit le rayon du cercle
- Les attributs de trait et de largeur de trait contrôlent l'apparence du contour d'une forme. Nous définissons le contour du cercle sur une "bordure" verte de 4px
- L'attribut fill fait référence à la couleur à l'intérieur du cercle. Nous définissons la couleur de remplissage sur jaune
- La balise de fermeture </svg> ferme l'image SVG
Remarque : étant donné que SVG est écrit en XML, tous les éléments doivent être correctement fermés !