Si vous voulez créer une forme SVG plus complexe qu’un cercle ou un rectangle, vous pouvez essayer le polygone.

En SVG, un polygone est une forme fermée constituée de lignes droites ; SVG ne propose pas (encore) d’éléments pour les polygones réguliers (comme étoile ou hexagone par exemple), mais il vous permet de créer n’importe quelle forme en indiquant les points qui la définissent. Des formes constituées de trois ou quatre pointes sont faciles à coder manuellement, mais vous aurez sans doute besoin d’un logiciel de création graphique comme Adobe Illustrator, Inkscape, Sketch ou Photoshop pour réaliser des designs plus complexes, que vous pourrez exporter au format SVG. Cependant, il est vraiment utile de comprendre les bases des polygones SVG car cela vous permettra de “bidouiller” et de modifier les formes directement dans le code sans avoir à repasser par l’éditeur graphique.

Le plus simple des polygones SVG : le triangle

Commençons par la plus simple des formes, en utilisant trois points pour créer un triangle rectangle :

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0 0, 100 100, 0 100"/>
</svg>

Ce qui nous donne :

Quelques petites choses à noter :

• comme précédemment, les axes x et y ont leur origine dans le coin supérieur gauche de la viewBox : X est l’axe horizontal, la valeur de x augmente lorsque le point se déplace vers la droite, et Y est l’axe vertical, la valeur de y augmente lorsque le point se déplace vers le bas.
• les points constituant le polygone sont définis comme des paires de coordonnées x et y.
• ces coordonnées sont séparées par une virgule.
• il n’y a pas de direction requise dans l’ordre des points : vous pouvez commencer par n’importe quel point et continuer dans la direction que vous voulez. Dans l’exemple qui précède, le point “sommet” du polygone est défini le premier, suivi des deux autres dans le sens des aiguilles d’une montre — on aurait tout aussi bien pu commencer par le point inférieur gauche et continuer ensuite dans le sens inverse des aiguilles d’une montre.
• il est inutile de répéter le premier point à la fin, SVG sait comment fermer le polygone tout seul comme un grand.
• on peut appliquer stroke, fill et stroke-width aux polygones, comme nous l’avions fait pour les cercles, ellipses, rectangles et carrés.

Et si nous voulions créer un triangle équilatéral ? il suffit pour cela de repositionner un seul point :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <polygon points="50 15, 100 100, 0 100"/>
</svg>

Le problème du remplissage croisé

Avec trois points reliés par des lignes droites, il est impossible d’avoir des intersections. Mais à partir de quatre points, c’est parfaitement possible :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <polygon points="0 20, 100 20, 100 0, 0 100 "/>
</svg>

SVG (comme la plupart des logiciels de création graphique) ne voit pas d’inconvénient à retourner ce résultat — qui n’est peut-être pas celui que vous attendiez :

Selon ce que vous voulez obtenir, il vous faudra peut-être repositionner le troisième point ou en ajouter un cinquième de manière à régler le problème.

Une petite bibliothèque de polygones réguliers

Même s’il est probable que vous créerez vos éléments SVG à l’aide d’un outil graphique, il est utile de voir la manière dont est construit le code des polygones réguliers. Vous pouvez bien évidemment copier ce code et l’utiliser dans vos créations, chaque polygone tient à l’intérieur d’une viewBox de 100 × 100.

Pentagone

<polygon points="26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 " fill="hsl(56,80%,50%)"/>

Étoile

<polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="hsl(106,80%,50%)"/>

Hexagone

<polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5" fill="hsl(156,80%,50%)"/>

Octogone

<polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4" fill="hsl(216,80%,50%)"/>

Et voilà ! Maintenant que nous avons passé en revue les formes de base, nous allons revenir aux lignes dans notre prochain article, en nous intéressant plus précisément aux lignes SVG, aux lignes multiples et aux chemins.