<path> en SVG : la commande qui dessine absolument tout

Ouvrez le code source de n'importe quelle icône SVG téléchargée sur le web : dans neuf cas sur dix, elle ne contient qu'un seul élément, <path>, avec un attribut d rempli de lettres et de chiffres à première vue illisibles. C'est la balise que les logiciels de dessin comme Illustrator ou Figma exportent en priorité, parce qu'elle peut reproduire n'importe quel contour, aussi complexe soit-il.

Contrairement à une forme prédéfinie qui a un contour figé, un <path> ne connaît qu'une seule règle : suivre pas à pas les instructions de déplacement, de ligne et de courbe écrites dans son attribut d. C'est ce qui en fait l'outil de base pour dessiner un logo, une icône ou une carte géographique en SVG.

Définition

L'élément <path> dessine une forme vectorielle libre à partir d'une suite de commandes stockées dans son attribut d (pour « data », les données du dessin). Chaque commande est une lettre suivie de coordonnées : M pour déplacer le crayon sans dessiner, L pour tracer une ligne droite, C pour une courbe de Bézier cubique, A pour un arc de cercle ou d'ellipse, et Z pour fermer la forme en revenant au point de départ. Une lettre majuscule signifie des coordonnées absolues, la même lettre en minuscule signifie des coordonnées relatives à la position actuelle du crayon.

Les commandes principales de l'attribut d

Une poignée de commandes suffit pour dessiner la plupart des formes courantes.

Exemple de rendu concret

Voici un panneau « stop » simplifié dessiné uniquement avec des lignes droites, puis une goutte d'eau dessinée avec une courbe : deux usages typiques du <path>.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 30 10 L 70 10 L 90 30 L 90 70 L 70 90 L 30 90 L 10 70 L 10 30 Z" fill="#e63946" stroke="#7a1f28" stroke-width="2" />
  <path d="M 150 15 C 170 40 180 60 150 85 C 120 60 130 40 150 15 Z" fill="#4895ef" />
</svg>

Le premier <path> enchaîne sept commandes L pour dessiner l'octogone du panneau, avant de se refermer avec Z. Le second combine deux courbes C pour obtenir la silhouette arrondie d'une goutte, un contour impossible à obtenir avec une forme prédéfinie.

Différence avec les formes prédéfinies

<rect>, une ellipse ou un <polygon> sont des raccourcis : ils décrivent une forme géométrique connue avec quelques attributs simples (position, taille, rayon). Le <path> n'a pas ce confort, chaque segment doit être écrit à la main ou généré par un logiciel, mais il peut représenter absolument n'importe quel contour : une lettre de texte convertie en vecteur, une carte de pays, une icône aux formes organiques. En pratique, on utilise les formes prédéfinies quand elles suffisent, car elles restent plus lisibles dans le code, et on réserve le <path> aux contours qu'aucune balise simple ne peut reproduire.

Piège classique

Cas d'usage réel

Les icônes de la plupart des bibliothèques (Solar, Font Awesome, Material Icons) sont livrées sous forme d'un unique <path> par icône, avec parfois un <animateMotion> associé pour faire suivre une trajectoire à un élément le long de ce tracé, comme une flèche qui glisse le long d'une route dessinée. Les logos exportés depuis Illustrator ou Figma suivent le même principe : chaque contour du dessin devient un <path> avec sa propre couleur de remplissage.

Foire aux questions

Oui, c'est même l'un des usages les plus fréquents : on anime la longueur du trait visible avec les propriétés stroke-dasharray et stroke-dashoffset pour obtenir un effet de dessin progressif, ou on fait suivre le tracé à un autre élément avec <animateMotion>.

Rarement au-delà de formes très simples. Pour un contour complexe, on dessine la forme dans un logiciel vectoriel puis on exporte le SVG, qui génère automatiquement l'attribut d avec toutes les commandes nécessaires.

Oui, en enchaînant plusieurs commandes M dans le même attribut d, chacune démarre un nouveau sous-tracé indépendant, ce qui permet par exemple de dessiner la lettre « O » avec un contour extérieur et un trou intérieur en une seule balise.