Les bases de SVG : Polygones

Dudley Storey termine la série d'articles sur les formes de bases SVG avec les polygones : triangles, étoiles et autres formes plus complexes — dans une présentation claire et simple comme toujours.

Par

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 cé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 augment 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 voir 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.

NdT : Si vous utilisez Sketch pour votre création graphique, vous pouvez consulter dans La Cascade deux articles en lien avec ce qui vient d’être présenté : Sketch et les vecteurs, et L’outil Scissors de Sketch.

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 consacrés à SVG dans La Cascade


Du même auteur dans La Cascade :

Les bases de SVG : Lignes simples et multiples
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, Demosthenes.info.

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.