MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

L’élément <path> (en français chemin) est le plus versatile des éléments de la bibliothèque SVG des formes basiques. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.

Les chemins créent des formes complexes en combinant plusieurs lignes droites ou courbes. Les formes complexes composées uniquement de lignes droites peuvent être crées avec des lignes brisées (polylines). Bien que les lignes brisées et les chemins peuvent créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes et ne s’adaptent pas bien au grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il n’est pas recommandé de créer des chemins complexes en utilisant un éditeur XML ou texte, comprendre comment ils fonctionnent vous permettra d’identifier et de corriger des erreurs d’affichage dans les SVG.

La forme d’un élément path est définie par un attribut : d (en savoir plus dans formes basiques). L’attribut d contient une série de commandes et de paramètres utilisés par ces commandes.

Chacune des commandes est instanciée par une lettre spécifique. Par exemple, positionnons-nous aux coordonées (10, 10). La commande « aller à » est invoquée par la lettre M (pour Move). Quand l’interpréteur rencontre cette lettre, il comprend que vous voulez vous rendre en un point. Ainsi, pour aller en (10, 10), vous utiliserez la commande "M 10 10". Après cela, l’interpréteur commence à lire la commande suivante.

De plus, toutes les commandes se présentent sous deux formes. Une lettre majuscule spécifie des coordonnées absolues dans la page, et une lettre minuscule spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »).

Les coordonnées dans l’attribut d sont toujours sans unité et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins.

Commandes de lignes

Il existe cinq commandes de lignes pour les nœuds <path>. Comme leur nom l’indique, chacune dessine simplement une ligne droite entre deux points. La première commande est « aller à », M, qui a été décrite ci-dessus. Elle prend deux paramètres, une coordonnée x et une coordonnée y auxquelles se rendre. Si votre curseur se trouvait déjà quelque part dans la page, aucune ligne n’est dessinée pour connecter les deux positions. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple :

M x y

ou

m dx dy

Dans l’exemple suivant, nous avons seulement un point en (10, 10). Notez, cependant, qu’il n’apparaîtrait pas si vous vous contentiez de dessiner le chemin normalement. Par exemple :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>

</svg>

Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec L. L prend deux paramètres, des coordonnées x et y, et dessine une ligne depuis la position actuelle vers la nouvelle position.

L x y (ou l dx dy)

Il existe deux formes abrégées pour dessiner des lignes horizontales ou verticales. H dessine une ligne horizontale, et V dessine une ligne verticale. Ces deux commandes ne prennent qu’un seul argument car elles ne se déplacent que le long d’une direction.

H x (ou h dx)
V y (ou v dy)

Une manière facile de commencer est de dessiner une forme. Nous allons commencer avec un rectangle (qui pourrait être plus aisément dessiné avec un élément <rect>). Il est  composé uniquement de lignes horizontales et verticales :

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>

</svg>

Nous pouvons raccourcir un peu la déclaration de chemin ci-dessus en utilisant la commande « fermer le chemin », invoquée avec Z. Cette commande dessine une ligne droite depuis la position actuelle vers le premier point du chemin. Elle est souvent placée à la fin d’un nœud chemin, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule.

Z (ou z)

Ainsi, notre précédent chemin peut se raccourcir en :

<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

Vous pouvez également utiliser la forme relative de ces commandes pour dessiner la même image. Les commandes relatives sont invoquées en utilisant des lettres minuscules, et plutôt que de déplacer le curseur vers des coordonnées exactes, elles le déplacent relativement à sa dernière position. Par exemple, puisque notre boîte est de dimension 80 x 80, l’élement path aurait pu être écrit :

<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

Le chemin va se positionner au point (10, 10), puis se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, puis de 80 points vers la gauche, puis revenir à son point de départ.

Dans ces exemples, il serait probablement plus simple d’utiliser un élément <polygon> ou <polyline>. Cependant, les chemins sont si couramment utilisés en dessin SVG que le développeur peut se sentir plus à l’aise avec eux. Il n’y a pas de réel avantage ou inconvénient à utiliser l’un ou l’autre.

Commandes de courbes

Il existe trois différentes commandes que vous pouvez utiliser pour créer des courbes lisses. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents aux courbes de Bézier, consultez une référence comme Wikipedia. Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments path : l’une cubique, invoquée avec C, et l’autre quadratique, invoquée avec Q.

Courbes de Bézier

La courbe cubique, C, est légèrement plus complexe. Ce type de courbe nécessite deux points de contrôle pour chaque sommet. Ainsi, pour créer une courbe de Bézier cubique, vous devez spécifier trois paires de coordonnées.

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

Ici, la dernière paire de coordonnées (x, y) est l’endroit où vous voulez que la ligne se termine. Les deux autres paires sont les points de contrôle. Le point de contrôle pour le début de la courbe est (x1, y1), et (x2, y2) est celui de la fin de la courbe. Les points de contrôle décrivent, pour faire simple, la pente de la courbe en le point concerné. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.

Cubic Bézier Curves with grid

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

L’exemple ci-dessus crée neuf courbes de Bézier cubiques. De gauche à droite, les points de contrôle sont de plus en plus espacés horizontalement. De haut en bas, ils sont de plus en plus éloignés des extrémités. La chose à remarquer ici est que la courbe commence dans la direction du premier point de contrôle, puis se courbe de manière à terminer le long de la direction du second point de contrôle.

Vous pouvez lier ensemble plusieurs courbes de Bézier pour créer des formes harmonieuses étendues. Souvent, le point de contrôle d’un côté d’une extrémité sera une réflexion du point de contrôle utilisé de l’autre côté, afin de garder une pente constante. Dans ce cas, vous pouvez utiliser une version raccourcie de la courbe cubique, désignée par la commande S (ou s).

S x2 y2, x y (ou s dx2 dy2, dx dy)

S produit le même type de courbe que précédemment, mais si elle suit une autre commande S ou C, le premier point de contrôle est automatiquement une réflexion de celui utilisé précédemment. Si la commande S ne suit pas une autre commande S ou C, la position actuelle du curseur est utilisée comme premier point de contrôle. Dans ce cas, le résultat est le même que ce que la commande Q aurait produit avec les mêmes paramètres. Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.

ShortCut_Cubic_Bezier_with_grid.png

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

L’autre type de courbe de Bézier, la courbe quadratique invoquée avec Q, est en fait plus simple que la cubique. Elle nécessite seulement un point de contrôle, qui détermine la pente de la courbe à la fois au point de départ et au point d’arrivée. Elle prend deux arguments : le point de contrôle et le point d’arrivée de la courbe.

Q x1 y1, x y (ou q dx1 dy1, dx dy)

Quadratic Bézier with grid

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

Comme pour la courbe cubique, il existe un raccourci pour lier ensemble plusieurs courbes quadratiques, invoqué avec T.

T x y (ou t dx dy)

Ce raccourci examine le précédent point de contrôle que vous avez utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement des points d’extrémités.

Ce raccourci fonctionne uniquement si la commande précédente est une commande Q ou T. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.

Shortcut_Quadratic_Bezier_with_grid.png

<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>

Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.

Arcs

L’autre type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec A. Les arcs sont des sections de cercles ou d’ellipses. Pour un rayon x et un rayon y donnés, il existe deux ellipses pouvant connecter deux points quelconques (en supposant qu’ils sont compris dans le rayon du cercle). Suivant l’un de ces deux cercles, vous pouvez prendre deux chemins possibles pour connecter les points, si bien qu’en toute situation, quatre arcs différents sont possibles. À cause de cela, les arcs nécessitent un certain nombre d’arguments :

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

Comme point de départ, l’élément arc demande deux arguments pour le rayon x et le rayon y. Au besoin, consultez ellipses pour comprendre leur utilisation. Les deux arguments finaux désignent les coordonnées x et y qui terminent le tracé. Ensemble, ces quatre valeurs définissent la structure de base de l’arc.

Le troisième paramètre décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple :

SVGArcs_XAxisRotation_with_grid

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

Cet exemple montre un élément path qui parcourt la page en diagonale. En son centre, deux arcs elliptiques sont coupés (rayon x = 30, rayon y = 50). Pour le premier arc, le paramètre x-axis-rotation a été laissé à 0, et l’ellipse autour de laquelle passe l’arc (montrée en gris) est orientée verticalement. Pour le second arc en revanche, x-axis-rotation est passé à -45 degrés. Cela pivote l’ellipse, de telle sorte que son petit axe est aligné avec la direction du chemin, comme illustré par la seconde ellipse dans l’image.

Les quatre différents chemins mentionnés ci-dessus sont déterminés par les deux arguments suivants. Comme mentionné précédemment, il y a encore deux ellipses possibles autour desquelles le chemin peut passer, et deux différents chemins possibles pour chaque ellipse, ce qui donne quatre chemins possibles. Le premier argument est large-arc-flag. Il détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, ce drapeau détermine selon quelle direction l’arc va parcourir un cercle donné. Le second argument est sweep-flag. Il détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru. L’exemple ci-dessous montre les quatre combinaisons possibles, ainsi que les deux cercles pour chaque cas.

<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

Les arcs sont un moyen facile de créer des portions de cercle ou d’ellipse dans vos dessins. Par exemple, un graphique en camembert nécessite un arc différent pour chaque partie.

Si vous êtes en train de migrer vers SVG depuis Canvas, les arcs peuvent être la partie la plus difficile à appréhender, mais sont également bien plus puissants. Comme les points de départ et d’arrivée de tout chemin parcourant un cercle sont confondus, un nombre infini de cercles peuvent être choisis, par conséquent le chemin est indéfini. Il est possible d’en faire une approximation en prenant des points de départ et d’arrivée légèrement décalés, puis en les connectant à l’aide d’un autre segment de chemin. Dans ces conditions, il est souvent plus facile d’utiliser un vrai nœud cercle ou ellipse à la place. Cette démo interactive peut vous aider à comprendre les concepts derrière les arcs SVG : http://codepen.io/lingtalfi/pen/yaLWJG (testé avec Chrome et Firefox seulement, peut ne pas marcher avec votre navigateur).

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : Watilin
 Dernière mise à jour par : Watilin,