Les bases de SVG : Lignes simples et multiples

Nous avons vu les formes de base de SVG, Dudley Storey présente maintenant les lignes, simples et multiples et.. ce n’est pas simple. Mais avec Dudley, tout devient clair.

Par

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 consister simplement en deux points, et chaque point est spécifié par deux coordonnées x et y.

À la différence des formes que nous avons vues jusqu’ici, les lignes sont entièrement invisible 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.

Dans la même série :

Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Les bases de SVG : Polygones
Les bases de SVG : Lignes simples et multiples


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.