<circle>
Dessiner des formes : cercles, rectangles, lignes
Formes géométriques SVG — cercles, rectangles, lignes
Les formes de base SVG sont des primitives graphiques : <circle>, <rect>, <line>, <ellipse> et <polygon>. Chacune se définit par des attributs de position et de dimension, pas besoin de trace complexe pour dessiner un rectangle ou un cercle.
Quand l'utiliser
Tu veux dessiner des formes simples : icônes, badges, indicateurs visuels, graphiques basiques. Un <rect> pour un bouton, un <circle> pour un avatar par défaut, un <polygon> pour une étoile de notation.
Ce que tu gagnes
Accessibilité : les formes seules n'ont pas de sémantique. Ajouté un <title> au <svg> parent ou un aria-label sur le groupe (<g>) pour que les technologies d'assistance comprennent ce que la forme représente.
Exemple de code
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<!-- Rectangle -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="teal" />
<!-- Circle -->
<circle cx="150" cy="40" r="30" fill="coral" />
<!-- Ellipse -->
<ellipse cx="250" cy="40" rx="40" ry="25" fill="gold" />
<!-- Line -->
<line x1="10" y1="120" x2="290" y2="120" stroke="gray" stroke-width="2" />
<!-- Polygon (triangle) -->
<polygon points="150,140 120,190 180,190" fill="slateblue" />
</svg>