SVG Path Data – lignes, arcs et courbes de Bézier

L’élément <path> dessine le contour de n’importe quelle forme en combinant lignes, arcs et courbes de Bézier. C’est l’élément SVG le plus flexible pour créer des paths ouverts ou fermés. Sa géométrie est stockée dans un seul attribut d, qui contient une suite de commandes.

Dans cet article, vous apprendrez à :

• Lire les commandes SVG les plus courantes dans l’attribut d.
• Dessiner lignes droites, horizontales, verticales et formes fermées.
• Utiliser A pour dessiner des arcs SVG.
• Créer des courbes de Bézier quadratiques et cubiques avec points de contrôle.
• Choisir T et S pour enchaîner des courbes de façon fluide.

Groupes de commandes path SVG

Groupe	Commandes	Description
Moveto	M, m	Définit le point de départ d’un nouveau subpath.
Lineto	L, l, H, h, V, v	Dessine des lignes droites.
Closepath	Z, z	Ferme le subpath courant.
Bézier cubique	C, c, S, s	Dessine des courbes avec deux points de contrôle.
Bézier quadratique	Q, q, T, t	Dessine des courbes avec un point de contrôle.
Arc elliptique	A, a	Dessine des arcs avec rayons, rotation et flags.

Les commandes majuscules utilisent des coordonnées absolues; les minuscules utilisent des coordonnées relatives. Imaginez un point courant qui se déplace : M place ce point, chaque commande dessine depuis lui et laisse le point courant à un nouveau endpoint.

Comment écrire SVG path data

1. Créez un élément <path> et placez la géométrie dans d.
2. Commencez par M x y pour définir le point de départ.
3. Ajoutez des commandes comme L, H, V, A, Q ou C.
4. Utilisez majuscules pour coordonnées absolues et minuscules pour coordonnées relatives.
5. Ajoutez Z si le path doit devenir une forme fermée.
6. Ajoutez fill, stroke et stroke-width pour rendre le path visible.

Lignes et paths

Moveto (M, m)

Un path commence par M x y. Les coordonnées x et y indiquent le point courant où le dessin commence.

Lineto (L, l, H, h, V, v)

L dessine vers un point, H dessine horizontalement et V verticalement. Après chaque commande, le point courant devient l’endpoint.

Closepath (Z, z)

Z ferme le subpath par une ligne droite vers son point initial.

Exemple : carrés avec lineto

<svg height="400" width="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="M 30 30 L 110 30 L 110 110 L 30 110 L 30 30" fill="transparent" stroke-width="2" stroke="black" />
    <path d="M 50 50 H 130 V 130 H 50 Z" fill="transparent" stroke-width="2" stroke="blue" />
    <path d="M 70 70 h 80 v 80 h -80 Z" fill="transparent" stroke-width="2" stroke="red" />
</svg>

Le carré noir utilise L, le bleu combine H et V, et le rouge montre des commandes relatives.

Dessiner des arcs SVG

Les arcs dessinent des portions de cercles ou d’ellipses. Le même point de départ et le même endpoint peuvent être reliés par quatre arcs; large-arc-flag choisit petit ou grand arc, et sweep-flag choisit le sens.

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

Paramètre	Signification
rx, ry	Rayons de l’ellipse
x-axis-rotation	Rotation de l’axe x
large-arc-flag	0 petit arc, 1 grand arc
sweep-flag	0 antihoraire, 1 horaire
x y	Endpoint absolu

Dessiner des courbes de Bézier

Les courbes de Bézier dessinent des contours souples pour icônes, logos, illustrations et diagrammes. SVG prend en charge les courbes quadratiques avec un point de contrôle et les courbes cubiques avec deux points de contrôle.

Courbes de Bézier quadratiques

Q x1 y1 x y utilise un point de contrôle (x1 y1) et un endpoint (x y). La version q est relative.

Déplacer le point de contrôle change la courbure sans modifier le point initial ni l’endpoint.

Chaînes fluides avec T

T continue une courbe quadratique en réfléchissant le point de contrôle précédent. Il fonctionne comme continuation fluide seulement après Q ou T.

Courbe de Bézier cubique (C, c, S, s)

C x1 y1 x2 y2 x y utilise deux points de contrôle et un endpoint. S est la version fluide : SVG réfléchit le point de contrôle cubique précédent.

Exemple créatif : hibou en style primitif

Les courbes de Bézier peuvent être combinées avec des cercles pour créer des illustrations expressives.

Erreurs courantes et corrections

Problème	Cause	Correction
Le path ne s’affiche pas	d ne commence pas par M	Commencez par M x y
La forme n’est pas fermée	Z manque	Ajoutez Z à la fin du subpath
L’arc part dans le mauvais sens	Flags incorrects	Changez un flag à la fois
T n’est pas fluide	Commande précédente différente de Q ou T	Utilisez T seulement après Q ou T
Coins brusques entre cubiques	Plusieurs C consécutifs	Utilisez S pour les chaînes cubiques fluides
Décalage inattendu	Commandes absolues et relatives mélangées	Vérifiez majuscules et minuscules

FAQ – SVG Path Data

Qu'est-ce que SVG path data ?

C’est la chaîne de commandes stockée dans l’attribut d d’un <path>. Elle indique où se déplacer, tracer des lignes, dessiner des arcs et créer des courbes.

Quelle est la différence entre commandes majuscules et minuscules ?

Les majuscules utilisent des coordonnées absolues; les minuscules utilisent des coordonnées relatives au point courant.

Comment fermer un path SVG ?

Utilisez Z ou z à la fin du subpath pour revenir au point initial.

Quand utiliser path plutôt que des formes SVG de base ?

Utilisez <path> pour contours personnalisés, icônes, logos, arcs et courbes. Les formes de base suffisent pour rectangles, cercles, lignes et polygones simples.

Spécification et ressources associées

• La section path data définit l’attribut d et toutes les commandes.
• Formes SVG convient lorsque des formes de base suffisent.
• Systèmes de coordonnées et unités SVG explique la mesure des coordonnées.
• SVG viewBox aide à mettre à l’échelle et recadrer des paths.
• Path Builder montre comment construire path data par API .NET.
• Modifier SVG Path Data en Python montre comment mettre à jour l’attribut d avec Python via .NET.