Si vous souhaitez dessiner des lignes ou une forme ouverte, plutôt qu’un polygone ou un cercle, SVG vous offre deux options : les lignes et les polylignes.

Les lignes

La syntaxe SVG pour les lignes peut paraître intimidante de prime abord, mais c’est parce qu’elle est précise : une ligne peut être décrite simplement en deux points, chacun spécifié par ses coordonnées x et y.

À la différence des formes que nous avons vues jusqu’ici, les lignes sont entièrement invisibles par défaut, et le resteront tant qu’on n’aura pas spécifié au moins une couleur de trait (stroke). Une fois colorées, elles auront l’épaisseur d’un cheveu tant qu’on n’aura pas spécifié une épaisseur via stroke-width.

<svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="300" y2="200" stroke-width="20" stroke="black" />
</svg>

Le lecteur à l’oeil exercé aura remarqué que l’extrémité du trait est coupé par les coins de la viewBox. Pour s’assurer que le trait apparaisse dans son intégrité, il faut lui donner des coordonnées qui dépassent la viewBox — ou bien utiliser stroke-linecap: square (dont nous allons parler plus bas) afin d’étendre l’extrémité des lignes.

Le résultat avec stroke-linecap: square :

Les polylignes

Les polylignes sont simplement des lignes SVG qui se rejoignent en des points multiples :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4">
  <polyline stroke="#000" stroke-width="6" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/>
</svg>

Ce qui donne :

Remarquez que contrairement à ce qui se passe avec les outils graphiques, le fait de placer le dernier point d’une polyligne au même endroit que le point de départ n’aura pas pour résultat de “fermer” la forme. Cependant, vous pouvez appliquer un remplissage couleur (fill) à la forme :

Je vous en dirai plus sur les fill dans un article à venir, mais pour l’instant, il suffira de dire que même si nous pouvons appliquer un remplissage couleur à une polyligne, et en général il marchera comme souhaité, il ne donnera qu’une apparence de polygone fermé, mais ce ne sera pas la même chose.

Caps & corners

Lorsqu’une ligne SVG change de direction, on n’est pas obligé de rendre l’angle qui en résulte sous la forme d’un angle “dur” : il existe deux autres options, grâce à la propriété stroke-linejoin. Celle-ci prend deux valeurs, round (arrondi) et bevel (biseauté), qui font exactement ce qu’on attend d’elles (vous aurez peut-être besoin d’augmenter l’épaisseur du trait pour bien voir l’effet). Une troisième valeur, miter, est la valeur par défaut.

Ci-dessous, nos polylignes avec une valeur de stroke-linejoin="bevel" :

De la même manière, les fins de lignes peuvent se terminer par des sortes de capuchons, via la propriété stroke-linecap, qui prend trois valeurs, round (arrondi en demi cercle), square (la ligne prend un capuchon carré, comme le bout d’un lacet de chaussure), ou butt par défaut. Ci-dessous les trois options, où l’on voit que le capuchon allonge légèrement la ligne, comme on le voyait déjà dans le deuxième exemple de cet article :

S’agissant de propriétés liées à l’apparence, stroke-linejoin et stroke-linecap peuvent être appliquées soit comme attributs, soit comme propriétés CSS.

Un dernier point : Les traits (stroke) et les remplissages couleur (fill) peuvent être appliqués à d’autres objets que les lignes, polylignes et polygones ; par exemple, ils peuvent être utilisés pour tracer un texte.