Le format SVG : le tag path

Path est un élément SVG qui permet de dessiner un tracé ouvert ou fermé, avec éventuellement des courbes. Ce tag est plus complet mais nécessite de dominer plusieurs commandes. Il peut faire la même chose que les tags comme polyline ou polygon.

Path, un tag plus complet - et complexe

A l’intérieur du tag path, on trouvera un attribut "d" dans lequel une série de commande numérique sont mélangées avec des lettres. Voici un exemple de path qui dessine un carré

<svg width="100" height="100">
           <path d="M10 10 H90 V90 H10 Z" fill="#fc0"/>
</svg>

Commençons par la première, "M" qui signifie "move to", qui permet de placer le début du tracé dans l’espace de l’image.
"H" signifie un tracé horizontal depuis la position précédente jusqu’à la position indiquée par le chiffre qui suit. Seule la coordonnée horizontale est donnée, puisque la position verticale ne change pas.
"V" signifie un tracé vertical depuis la position précédente jusqu’à la position indiquée par le chiffre qui le suit. Seule la coordonnée verticale est donnée, puisque la position horizontale ne change pas.
"Z" signifie que l’on ferme la forme depuis le point précédent vers le premier point du tracé.

Donc le code ci-dessus fait ceci :
- M10 10 : démarrer la forme au point 10 10
- H 90 : tracer un trait horizontal jusqu’au point 90 10
- V 90 : tracer un trait vertical jusqu’au point 90 90
- H 10 : tracer une ligne horizontale jusqu’au point 10 90
- Z : tracer un trait jusqu’au point 10 10

On obtient un carré

Valeurs relatives
il est possible d’utiliser des valeurs relatives avec les lettres en minuscules h et v. On calcule alors le déplacement par rapport à la position précédente.
Voici le même carré dessiné avec des positions relatives.

<svg width="100" height="100">
           <path d="M10 10 h80 v80 h-80 Z" fill="#fc0"/>
</svg>

Courbes de bézier
Une courbe de bézier est dessinée par 4 points : un point de départ, un point d’arrivée et deux poignées qui donnent direction et amplitude à la courbe.

PNG - 14.8 ko

Avec la commande path, on utilisera la commande "M" pour placer le premier point, puis "C" suivie de 3 paires d’informations après la commande M :

<svg width="100" height="100">
       <path d="M10 10 C 20 80, 80 80, 90 10" stroke="black" fill="#fc0"/>
</svg>

A la suite de C, les deux premiers chiffres sont les coordonnées de la poignée du premier point. Les deux chiffres suivants sont les coordonnées du deuxième point, et les deux informations finales sont les coordonnées du deuxième point lui-même.

Le code ci-dessus fait ceci :
- M10 10 placer le point de démarrage à 10 10
- C 20 80 : placer la poignée du point de démarrage à 20 80
- ,80 80 : placer la poignée du deuxième point à 80 80
- ,90 10 : placer le deuxième point à 90 10

Utiliser la poignée précédente pour continuer une courbe
La plupart du temps, pour obtenir une courbe douce, entre plusieurs points, on récupère la poignée du point précédent en symétrie comme dans l’exemple ci-dessous

PNG - 12 ko

La commande "S" est prévue pour ça, et permet de donner juste 4 coordonnées au lieu de 6 pour définir la courbe suivante. La poignée du point 1 est automatique calculée, on ne doit définir que la poignée du point 2 et le point 2 lui-même :

<svg width="100" height="100">
       <path d="M10 50 C 20 80, 40 80, 50 50 S80 20, 90 50" stroke="black" fill="transparent"/>
</svg>

On peut ainsi enchainer les courbes qui suivent avec S.

Il est aussi possible de définir les points et poignées en relatif avec s en minuscule.

La courbe à une seule poignée

Il est possible de dessiner des courbes de Bezier utilisant une seule poigne, comme ceci :

PNG - 9.3 ko

Il y a bien deux poignées, mais elles sont définies par un seul point. L’avantage est évidemment de simplifier l’écriture.

<svg width="100" height="100">
       <path d="M10 50 Q 50 10 90 50" stroke="black" fill="transparent"/>
</svg>

Q désigne donc cette courbe à une seule poignée. Les deux premières coordonnées sont celle de cette poignée, et les deux suivantes le point 2

Magie, on peut après une courbe définie avec Q enchainer avec des courbes définies par T, pour lesquelles, comme pour C et S, on ne donne plus les coordonnées de la poignée, qui est calculée en continuité de la précédente. Deux coordonnées sont alors juste nécessaire : celles du point 2.

PNG - 9.3 ko
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
 <path d="M10 80 Q 52.5 10 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

Ce code donnera donc ceci :