Tuto SVG 05 - Paths

Public visé: dev lambda.

Objectif

• Comprendre la syntaxe d et les commandes de base.

Références W3C

• SVG 2 - Paths: https://www.w3.org/TR/SVG2/paths.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120" viewBox="0 0 240 120">
  <path d="M10 90 L60 20 L110 90 Z" fill="#f2c94c" stroke="#333" stroke-width="2"/>
  <path d="M140 90 C140 20 220 20 220 90" fill="none" stroke="#3a6ea5" stroke-width="3"/>
</svg>

tutos-svg-05-paths.svg

À retenir

• M déplace le curseur, L trace des lignes, Z ferme le chemin.
• C crée une courbe de Bézier cubique.
• Les commandes en minuscules sont relatives.

Exercice

• Remplace la courbe C par une courbe Q (quadratique).