HTML <svg> Tag
Exemple
Dessinez un cercle :
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La <svg> balise définit un conteneur pour les graphiques SVG.
SVG propose plusieurs méthodes pour dessiner des chemins, des rectangles, des cercles, du texte et des images graphiques.
Pour en savoir plus sur SVG, veuillez consulter notre Tutoriel SVG .
Support des navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Plus d'exemples
Exemple
Dessinez 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> Exemple
Dessinez 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> Exemple
Dessinez 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> Exemple
Dessinez un 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> Pages associées
Tutoriel HTML : HTML SVG
Tutoriel SVG : Tutoriel SVG