Tuto SVG 03 - Formes de base

Public visé: dev lambda.

Objectif

• Utiliser les formes simples pour dessiner rapidement.

Références W3C

• SVG 2 - Basic Shapes: https://www.w3.org/TR/SVG2/shapes.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="140" viewBox="0 0 220 140">
  <rect x="10" y="10" width="60" height="40" rx="6" fill="#f2c94c"/>
  <circle cx="120" cy="30" r="20" fill="#3a6ea5"/>
  <ellipse cx="180" cy="30" rx="25" ry="15" fill="#2d9cdb"/>
  <line x1="10" y1="80" x2="210" y2="80" stroke="#333" stroke-width="2"/>
  <polyline points="10,110 60,90 110,110 160,90 210,110" fill="none" stroke="#0f2d40" stroke-width="2"/>
  <polygon points="60,130 90,100 120,130" fill="#eb5757"/>
</svg>

tutos-svg-03-formes-de-base.svg

À retenir

• rect gère les coins arrondis via rx/ry.
• polyline ne ferme pas la forme, polygon la ferme.
• Les formes de base sont idéales pour des icônes simples.

Exercice

• Transforme la polyline en polygon et ajoute un stroke.