Balise <svg> HTML

Définition et utilisation

<svg> Les balises définissent le conteneur des graphiques SVG.

SVG offre plusieurs méthodes pour dessiner des chemins, des cadres, des cercles, du texte et des images graphiques.

Pour en apprendre davantage sur SVG, veuillez lire notre Tutoriel SVG。

Veuillez également consulter :

Tutoriel HTML :HTML SVG

Tutoriel SVG :Tutoriel SVG

Exemple

Exemple 1

Dessiner un cercle :

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Essayez-le vous-même

Exemple 2

Dessiner un rectangle :

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Essayez-le vous-même

Exemple 3

Dessiner un carré avec des coins arrondis :

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Essayez-le vous-même

Exemple 4

Dessiner une étoile :

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Essayez-le vous-même

Exemple 5

Dessiner le logo SVG :

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

Essayez-le vous-même

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1