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 côtés égaux.

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.