W3docs
fr
Se connecter

SVG Path

Apprenez l'élément SVG <path> et ses commandes d : moveto, lineto, courbes de Bézier cubiques et quadratiques, arcs et closepath, avec exemples.

L'élément SVG <path> est la forme la plus puissante et la plus flexible de SVG. Presque toutes les autres formes SVG — lignes, polygones et courbes — peuvent être reproduites avec un <path>. Cette page explique l'attribut unique qui fait tout le travail, l'attribut d, et présente en détail chaque commande de dessin qu'il prend en charge, avec leurs paramètres et des exemples exécutables.

Description de l'élément <path>

L'élément SVG <path> spécifie un tracé : une série de commandes de dessin qui déplacent un « stylo » imaginaire sur le canevas pour tracer des lignes, des courbes et des arcs.

Les tracés sont utilisés pour créer des formes complexes en combinant plusieurs segments droits ou courbés. Des formes complexes composées uniquement de lignes droites peuvent aussi être créées en tant que polylignes, mais contrairement à une polyligne, un tracé peut dessiner de vraies courbes, il n'a donc pas besoin de nombreux petits segments pour simuler une courbe.

En SVG, le système de coordonnées commence au coin supérieur gauche : x croît vers la droite et y croît vers le bas. Gardez cela à l'esprit — une valeur y plus grande se trouve plus bas à l'écran, et non plus haut.

La forme d'un tracé est entièrement définie par l'attribut d (« données »). La valeur de d est une chaîne composée de commandes à une seule lettre, chacune suivie des nombres (paramètres) dont cette commande a besoin.

Commandes de l'attribut d

Chaque commande est une lettre unique suivie de ses paramètres. Les commandes disponibles sont :

CommandeNomParamètres
M / mmovetox y
L / llinetox y
H / hhorizontal linetox
V / vvertical linetoy
C / ccubic Bézier curvetox1 y1 x2 y2 x y
S / ssmooth cubic Bézier curvetox2 y2 x y
Q / qquadratic Bézier curvetox1 y1 x y
T / tsmooth quadratic Bézier curvetox y
A / aelliptical arcrx ry x-axis-rotation large-arc-flag sweep-flag x y
Z / zclosepath(aucun)

Commandes absolues vs relatives

Chaque commande existe sous deux formes. Les lettres majuscules utilisent des coordonnées absolues — chaque x y est mesuré depuis l'origine (0, 0) en haut à gauche du SVG. Les lettres minuscules utilisent des coordonnées relatives — chaque valeur est un décalage par rapport à la position actuelle du stylo (là où la commande précédente s'est terminée).

Les deux tracés ci-dessous dessinent le même triangle. Le premier utilise des commandes absolues, le second des commandes relatives :

<!-- Absolute: every point measured from (0,0) -->
<path d="M 100 50 L 200 50 L 150 150 Z" fill="orange" />

<!-- Relative: every point is an offset from the previous point -->
<path d="M 100 50 l 100 0 l -50 100 Z" fill="orange" />

Lecture de la version relative : départ en (100, 50), puis déplacement de +100, 0 (vers 200, 50), puis déplacement de -50, +100 (vers 150, 150), puis z ferme le tracé en revenant au départ. Les commandes relatives sont pratiques quand vous souhaitez déplacer une forme entière — changez uniquement le premier M et le reste suit.

MoveTo, lignes et fermeture (M, L, H, V, Z)

  • M x y lève le stylo et le déplace vers (x, y) sans dessiner. Chaque tracé doit commencer par un moveto.
  • L x y trace une ligne droite du point actuel vers (x, y).
  • H x trace une ligne horizontale jusqu'à la coordonnée x x (y reste inchangé). C'est un raccourci pour un L horizontal.
  • V y trace une ligne verticale jusqu'à la coordonnée y y (x reste inchangé).
  • Z ferme le tracé en traçant une ligne droite jusqu'au dernier point M.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="250">
      <path d="M190 40 L115 240 L265 240 Z" fill="lightblue" stroke="navy" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>
Essayez vous-même »

L'attribut fill colore l'intérieur de la forme, tandis que stroke colore le contour. Pour plus d'options de contour (largeur, tirets, extrémités de ligne), consultez SVG Stroking.

Courbes de Bézier cubiques (C et S)

Une courbe de Bézier cubique incurve un segment à l'aide de deux points de contrôle. C x1 y1 x2 y2 x y trace une courbe du point actuel vers (x, y) ; (x1, y1) est le point de contrôle du début et (x2, y2) est le point de contrôle de la fin. La courbe est « attirée » vers chaque point de contrôle.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 C20 20, 280 20, 280 150"
            fill="none" stroke="purple" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Ici, le stylo commence en (20, 150), et les deux points de contrôle (20, 20) et (280, 20) attirent la courbe vers le haut pour former une arche lisse se terminant en (280, 150). L'utilisation de fill="none" conserve la courbe ouverte au lieu de remplir la zone en dessous.

La variante lisse S x2 y2 x y prolonge une courbe C (ou S) précédente de façon continue : elle n'a qu'un seul point de contrôle car le premier est automatiquement reflété à partir du point de contrôle final de la commande précédente. Cela facilite l'enchaînement de courbes en une vague continue.

Courbes de Bézier quadratiques (Q et T)

Une courbe de Bézier quadratique est plus simple — elle n'utilise qu'un seul point de contrôle. Q x1 y1 x y trace une courbe du point actuel vers (x, y), courbée vers le point de contrôle unique (x1, y1).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 Q150 20 280 150"
            fill="none" stroke="green" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Le point de contrôle unique (150, 20) se situe au-dessus du point médian et courbe la ligne en une bosse symétrique. La variante lisse T x y prolonge une courbe Q/T précédente en reflétant automatiquement son point de contrôle, de sorte que vous ne fournissez que le nouveau point d'arrivée.

Arcs elliptiques (A)

La commande arc trace une section d'une ellipse. Elle prend sept paramètres :

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

  • rx, ry — les rayons horizontal et vertical de l'ellipse.
  • x-axis-rotation — rotation de l'ellipse, en degrés.
  • large-arc-flag — 0 pour le petit arc, 1 pour le grand arc entre les deux points.
  • sweep-flag — 0 pour balayer dans le sens antihoraire (angle négatif), 1 pour balayer dans le sens horaire (angle positif).
  • x, y — le point d'arrivée de l'arc.

Comme deux points sur une ellipse peuvent être reliés par quatre arcs possibles, les deux indicateurs permettent de choisir lequel est dessiné.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="200">
      <!-- Same start and end point, different flag combinations -->
      <path d="M60 150 A60 60 0 0 1 180 150"
            fill="none" stroke="crimson" stroke-width="3" />
      <path d="M60 150 A60 60 0 1 0 180 150"
            fill="none" stroke="teal" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Les deux arcs partagent les mêmes rayons (60 60) et les mêmes points de départ (60, 150) et d'arrivée (180, 150). Le tracé cramoisi utilise large-arc-flag 0, sweep-flag 1 pour dessiner le petit arc au-dessus de la ligne ; le tracé sarcelle utilise large-arc-flag 1, sweep-flag 0 pour dessiner le grand arc dans l'autre sens. Modifier les indicateurs est le meilleur moyen de comprendre le comportement de A.

Conseils

  • Un tracé commence toujours par un moveto. Sans un M/m d'ouverture, le tracé ne s'affiche pas.
  • Les nombres peuvent être séparés par des espaces ou des virgules — L 100 50 et L100,50 sont équivalents.
  • Les commandes identiques répétées peuvent être implicites : M10 10 L20 20 L30 30 peut s'écrire M10 10 L20 20 30 30.
  • L'écriture manuelle de tracés complexes est source d'erreurs ; un éditeur vectoriel qui exporte en SVG est généralement le meilleur flux de travail, mais comprendre les commandes vous permet de lire et de corriger le résultat.

Pages associées

  • SVG Reference — une liste rapide de tous les éléments et attributs SVG.
  • SVG Stroking — contrôlez la largeur, la couleur et les tirets des contours.
  • SVG Line — tracez un seul élément de ligne droite.
  • SVG Polygon — tracez des formes fermées à partir d'une liste de points.

Pratique

Pratique
Lesquelles des options suivantes sont des commandes valides de l'attribut 'd' d'un SVG path ?
Lesquelles des options suivantes sont des commandes valides de l'attribut 'd' d'un SVG path ?
Was this page helpful?