SVG dans HTML5
En HTML5, les éléments SVG peuvent être intégrés directement dans votre page HTML.
DANGER
Si le SVG est écrit en XML, tous les éléments doivent être correctement fermés !
Éléments de forme dans SVG
SVG dispose de certains éléments de forme prédéfinis. Les voici :
- rectangle
<rect> - cercle
<circle> - ellipse
<ellipse> - ligne
<line> - polyligne
<polyline> - polygone
<polygon> - chemin
<path>
Exemple d'intégration de SVG dans une page HTML :
Exemple d'intégration de SVG dans une page HTML
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="300" height="200">
<circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
</svg>
</body>
</html>Analysons maintenant le code :
- Une image SVG commence toujours par une balise
<svg>. - La largeur et la hauteur de l'image SVG sont spécifiées par les attributs width et height de l'élément
<svg>. - L'élément
<circle>dessine un cercle. - Les attributs cx et cy spécifient les coordonnées x et y du centre du cercle. Si cx et cy sont absents, le centre du cercle est défini à (0, 0).
- L'attribut r est utilisé pour spécifier le rayon du cercle.
- Les attributs stroke et stroke-width contrôlent l'apparence du contour d'une forme. Dans notre exemple de code, nous avons défini le contour du cercle comme une "bordure" violette de 5px.
- L'attribut fill définit une couleur à l'intérieur du cercle. Nous l'avons définie en rose.
- L'image SVG est fermée par la balise de fermeture
</svg>.
Pratique
Quelles sont les principales caractéristiques du format SVG en HTML5 ?