Les bases de SVG : Rectangles et Carrés

Après les cercles, voici les rectangles ! Dudley Storey reconstitue un célèbre tableau de Mondrian et nous montre chemin faisant tout ce qu'il faut savoir pour créer des rectangles en SVG.

Par

Après les cercles, les rectangles sont sans doute l’élément le plus facile à réaliser en SVG puisqu’il suffit d’ajouter un attribut pour y parvenir. La syntaxe de base consiste en une position x, une position y, une largeur et une hauteur :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
  <rect x="20" y="20" width="40" height="40"/>
</svg>

Quelques petites choses à noter tout de suite :

  • contrairement aux cercles, les rectangles sont dessinés à partir de leur coin supérieur gauche (déterminé par les coordonnées x et y).
  • comme la plupart des autres éléments, les rectangles sont noirs par défaut si aucun remplissage (fill) n’est indiqué.
  • l’élément rectangle est “auto-fermant”
  • comme tous les autres éléments, les rectangles qui apparaissent après dans le code seront positionnés au dessus des éléments qui les précèdent s’il y a chevauchement.
  • malgré l’impression trompeuse que pourrait donner le titre de cet article, il n’existe pas d’élément “carré” distinct du rectangle en SVG. Les carrés sont simplement des rectangles de hauteur et largeur égales.
Composition in Color A, 1917, by Piet Mondrian
Composition en couleur A, 1917, de Piet Mondrian, reconstitué en SVG

Bordures & Coins

Comme pour toutes les autres formes en SVG, on peut donner une bordure aux éléments <rect>, celle-ci étant un trait (stroke) dans le langage SVG :

<rect x="20" y="20" width="40" height="40" stroke="red" stroke-width="5" />

Ce qui nous donne :

En CSS, on peut utiliser border-radius pour arrondir les angles visibles des éléments. Pour les rectangles SVG, on utilise les attributs rx et ry :

<rect x="20" y="20" width="40" height="40" stroke="red" stroke-width ="5" rx="5" ry="5" />

Le résultat :

Cependant, contrairement à border-radius, rx et ry affectent simultanément et de manière égale tous les coins de l’élément — pas moyen de n’arrondir qu’un seul angle à la fois. On peut donner des valeurs différentes aux attributs rx et ry pour créer des effets spéciaux, par exemple pour donner une forme de de tonneau :

…mais la plupart du temps on donnera la même valeur aux deux attributs, et dans ce cas il existe un raccourci, il suffit d’indiquer uniquement rx :

<rect x="20" y="20" width="40" height="40" rx="5" />

Note : rx et ry sont considérés comme des attributs réguliers, et non comme des attributs de présentation, par conséquent on ne peut pas les utiliser actuellement en CSS, pas plus d’ailleurs qu’on ne peut utiliser border-radius sur les éléments SVG (mais on peut l’utiliser sur l’élément SVG lui-même, comme on peut le voir sur le Mondrian ci-dessus).

Le plus grand rectangle : styler le viewport

Dans la plupart des éditeurs, le background d’un SVG apparaît blanc. En fait ce n’est pas le cas : il est transparent, son canal alpha est masqué, ce qui signifie que son rendu sera parfait lorsqu’on le placera comme image ou élément en ligne sur n’importe quel background de page HTML.

La première solution qui vient à l’esprit lorsqu’on a besoin d’un “canevas” de couleur différente dans un SVG est de dessiner un énorme rectangle qui couvre tout le viewport SVG. Mais en général c’est plutôt une mauvaise idée : non seulement cela ajoute un élément supplémentaire à la page, mais en plus cela complique le rendu de la page. À la place, il suffit d’appliquer un style à l’élément SVG lui-même, comme sur notre reproduction de Mondrian.

svg { background: #fcedd6; }

Il est même possible de placer un border-radius sur l’élément SVG, comme je l’ai fait dans l’exemple de bouclier de Captain America, créé pour l’article sur les cercles. C’est pratique si, par exemple, vous voulez donner une impression d’ombre portée sur le SVG entier.

Retrouvez le code du tableau de Mondrian sur CodePen !

La recréation de l'oeuvre de Piet Mondrian est en partie inspirée du travail de Jenn Schiffer, qui a écrit une excellente série d'articles sur la recréation d'oeuvres d'art au moyen des technologies du web.

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 : Polygones
Les bases de SVG : Cercles et Ellipses
Scroll avec background révélé en pur CSS
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.