En HTML5, vous pouvez intégrer des éléments SVG directement dans vos pages HTML.
Intégrer SVG directement dans les pages HTML
Voici un exemple d'un 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> Essayez - le vous - même » SVG Code explanation:
- Une image SVG commence par un <svg> élément
- La largeur et la hauteur des attributs du <svg> élément définir la largeur et la hauteur de l'image SVG
- Le <circle> élément 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 sont omis, le centre du cercle est réglé sur (0, 0)
- Le r attribut définit le rayon du cercle
- Les attributs de trait et d'AVC largeur contrôlent la façon dont le contour d'une forme apparaît. Nous avons fixé le contour du cercle à une "frontière" verte 4px
- Le fill attribut fait référence à la couleur à l' intérieur du cercle. Nous avons mis la couleur de remplissage au jaune
- La fermeture </svg> tag ferme l'image SVG
Remarque: Comme SVG est écrit en XML, tous les éléments doivent être correctement fermés!