SVG dans HTML

Vous pouvez intégrer l'élément SVG directement dans une page HTML.

Intégrez directement l'SVG dans une page HTML

Voici un exemple simple de graphique SVG :

Désolé, votre navigateur ne prend pas en charge l'SVG en ligne.

Voici le code HTML :

<!DOCTYPE html>
<html>
<body>
<h1>Mon premier 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

Explication du code SVG :

  • L'image SVG commence par l'élément <svg>
  • Les propriétés 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 propriétés 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 réglé sur (0, 0)
  • La propriété r définit le rayon du cercle
  • Les propriétés stroke et stroke-width contrôlent la manière dont la contour de la forme est affiché. Nous avons défini le contour du cercle en vert de 4 pixels de largeur de bordure
  • La propriété fill définie la couleur à l'intérieur du cercle. Nous avons défini la couleur de remplissage en jaune
  • Fermeture de l'étiquette </svg> pour l'image SVG

Attention : Comme SVG est écrit en XML, tous les éléments doivent être fermés correctement !