Un graphique de courbe boursière, le tracé d'un signal électrocardiogramme, la ligne brisée d'un itinéraire sur une carte : dès qu'il s'agit de relier une série de points sans jamais refermer la forme, <polyline> est l'élément le plus direct. Elle évite d'avoir à écrire une longue série de commandes L dans un <path>.
C'est l'un des éléments les plus utiles pour construire à la main un petit graphique en courbes, sans dépendre d'une bibliothèque JavaScript externe. Elle reste l'un des rares éléments SVG où la simplicité du balisage rivalise directement avec ce qu'offrent des bibliothèques de graphiques bien plus lourdes à charger.
Définition
L'élément <polyline> dessine une ligne brisée composée de segments droits reliant une série de points donnée dans l'attribut points, au même format que pour un <polygon> (des paires x,y séparées par des espaces ou des virgules). Contrairement au polygone, le dernier point n'est jamais relié au premier : la forme reste ouverte, sauf si l'on ajoute explicitement les coordonnées du point de départ à la fin de la liste.
Attributs principaux
| Attribut | Rôle |
|---|---|
points | Liste des points reliés dans l'ordre, sous la forme « x1,y1 x2,y2... » |
fill | Couleur de remplissage (souvent mise à "none" pour une ligne) |
stroke, stroke-width | Couleur et épaisseur du trait de la ligne |
Les attributs stroke-linecap et stroke-linejoin influencent fortement le rendu d'une <polyline> : une valeur ronde adoucit les angles entre chaque segment, ce qui donne un tracé plus doux et plus lisible qu'une jonction en angle vif par défaut.
Exemple de rendu concret
Un petit graphique en courbes représentant une évolution sur cinq points, sans aucun remplissage :
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="10,80 55,50 100,65 145,20 190,35" fill="none" stroke="#264653" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
</svg>Sans fill="none", le navigateur remplirait par défaut l'intérieur de la ligne comme s'il s'agissait d'une forme fermée, ce qui donnerait un aplat de couleur peu lisible au lieu d'une simple courbe.
Différence avec la forme fermée
La seule différence structurelle avec un polygone est la fermeture automatique de la forme : le polygone la referme toujours, la polyline ne la referme jamais. Sur le plan visuel, cela a une conséquence directe sur le remplissage, un polygone rempli forme une surface pleine, tandis qu'une <polyline> remplie sans fill="none" produit un résultat souvent inattendu, car le navigateur trace un segment invisible entre le dernier et le premier point pour calculer la zone à remplir. Ce détail a une conséquence pratique en dessin d'icônes : un contour de maison, par exemple, doit se refermer et sera donc un polygone, alors que le tracé d'une chaîne de montagnes reste ouvert et convient parfaitement à une polyline.
Piège classique
fill="none" est l'erreur la plus fréquente avec <polyline>. Par défaut, l'attribut fill vaut noir, la ligne se retrouve alors accompagnée d'un aplat sombre entre le dernier et le premier point, ce qui casse totalement l'effet de courbe recherché pour un graphique.Cas d'usage réel
Les mini-graphiques de tendance (« sparklines ») intégrés dans un tableau de bord, les tracés d'itinéraires simplifiés sur une carte, ou les représentations de signaux (audio, capteurs, fréquence cardiaque) utilisent presque tous <polyline>. On peut aussi l'animer avec <animate> en faisant varier stroke-dashoffset pour simuler un tracé qui se dessine progressivement à l'écran. Associée à des points de repère à chaque extrémité, une <polyline> permet aussi de matérialiser une flèche ou un chemin fléché sur un schéma technique.
Foire aux questions
Non, chaque segment entre deux points consécutifs est toujours une ligne droite, pour obtenir une courbe lissée entre les points il faut passer par un tracé libre avec des commandes de Bézier. C'est exactement ce compromis qui explique pourquoi les bibliothèques de graphiques préfèrent souvent lisser une <polyline> a posteriori avec du CSS (comme stroke-linejoin: round) plutôt que de recalculer une courbe de Bézier point par point.
Deux points suffisent pour tracer un simple segment de droite, en dessous de deux points la forme n'a rien à afficher et reste invisible à l'écran.
Oui, certains graphiques en aires utilisent volontairement ce comportement, en combinant un fill semi-transparent avec un point de départ et de fin ramenés à la ligne de base pour obtenir un effet de surface sous la courbe.