Un bouton avec des coins arrondis, le fond coloré d'une carte, le cadre d'un badge : la grande majorité des interfaces dessinées en SVG commencent par un simple rectangle. L'élément <rect> est la forme la plus rapide à écrire dans tout le langage SVG, quatre attributs suffisent pour obtenir un résultat.
Il est aussi le premier élément que l'on apprend, car sa logique de position et de dimensions se retrouve ensuite dans presque toutes les autres formes du langage SVG.
Définition
L'élément <rect> dessine un rectangle défini par la position de son coin supérieur gauche (x, y) et ses dimensions (width, height). Deux attributs optionnels, rx et ry, arrondissent respectivement les rayons horizontal et vertical des coins : en ne renseignant que rx, le navigateur applique automatiquement la même valeur à ry, ce qui suffit dans la quasi-totalité des cas pour obtenir des coins arrondis symétriques.
Attributs principaux
| Attribut | Rôle |
|---|---|
x, y | Position du coin supérieur gauche |
width, height | Largeur et hauteur du rectangle |
rx, ry | Rayons d'arrondi des coins (horizontal et vertical) |
fill, stroke | Couleur de remplissage et de contour |
Si les attributs x et y sont omis, leur valeur par défaut est 0, le rectangle démarre alors au coin supérieur gauche du repère SVG. Omettre width ou height, en revanche, empêche simplement le rectangle de s'afficher : ces deux attributs sont donc à considérer comme obligatoires en pratique, même si la spécification ne les impose pas formellement.
Exemple de rendu concret
Un badge de notification classique, fait d'un rectangle à coins bien arrondis avec un contour :
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="160" height="60" rx="16" fill="#2a9d8f" stroke="#1b6f65" stroke-width="3" />
<text x="100" y="56" text-anchor="middle" font-size="20" fill="#ffffff">Terminé</text>
</svg>Ici rx="16" arrondit les quatre coins du badge sans qu'il soit nécessaire de préciser ry, et le <text> vient se centrer par-dessus grâce à text-anchor="middle".
Différence avec un élément proche
Face à un <path>, le <rect> perd en flexibilité mais gagne énormément en lisibilité : écrire <rect width="100" height="60" /> est bien plus clair que reconstruire le même rectangle avec quatre commandes L dans un attribut d. La règle est simple, dès qu'une forme est un vrai rectangle, même avec des coins arrondis, <rect> est le bon choix ; dès que la forme s'écarte du rectangle (un côté oblique, un coin coupé de façon asymétrique), il faut basculer vers un tracé plus libre.
Piège classique
rx supérieur à la moitié de width ou de height n'est pas une erreur : le navigateur le limite automatiquement à cette moitié. C'est ce qui permet, en fixant rx à la moitié exacte de la largeur d'un rectangle très fin, d'obtenir une forme en pilule aux bouts parfaitement arrondis, un raccourci utile pour dessiner des boutons ou des tags sans passer par une ellipse.Cas d'usage réel
Les fonds de carte, les arrière-plans de sections, les barres de progression et les squelettes de chargement (« skeleton loaders ») reposent presque toujours sur des <rect>. Un <rect> peut aussi servir de masque de recadrage lorsqu'il est placé dans un <clipPath>, pour ne montrer qu'une portion rectangulaire d'une image ou d'un dessin plus complexe. Dans les composants d'interface, le rectangle sert aussi de zone cliquable invisible : un <rect> avec un remplissage transparent (fill="transparent") permet d'agrandir la surface de clic d'une icône sans modifier son apparence visuelle, une astuce fréquente pour rendre un bouton plus facile à toucher sur mobile.
Foire aux questions
<rect> ?Oui, un carré n'est qu'un rectangle dont width et height ont la même valeur, il n'existe pas de balise dédiée au carré en SVG, <rect> suffit dans tous les cas.
width ou height vaut 0 ?Le rectangle n'est tout simplement pas rendu à l'écran, sans provoquer d'erreur, ce qui peut être utile pour masquer temporairement une forme via une animation qui fait varier cette valeur. Cette absence d'erreur est volontairement exploitée dans les squelettes de chargement, où plusieurs rectangles apparaissent puis disparaissent en boucle pour simuler un contenu en cours de récupération.
Non, <rect> applique la même paire rx/ry aux quatre coins à la fois, pour des rayons différents sur chaque coin il faut redessiner la forme avec des commandes de tracé personnalisées.