En SVG (Scalable Vector Graphics), la balise <rect> est utilisée pour créer des rectangles. Voici comment vous pouvez concevoir un rectangle en SVG avec des exemples :

Exemple de base :

xml
<svg width="100" height="100">
  <rect width="80" height="80" fill="blue" />
</svg>

Dans cet exemple, un rectangle de largeur 80 et de hauteur 80 est créé et rempli de couleur bleue.

Exemple avec bordures et remplissage :

xml
<svg width="150" height="100">
  <rect width="100" height="50" fill="yellow" stroke="black" stroke-width="2" />
</svg>

Ici, le rectangle a un remplissage jaune, une bordure noire, et une largeur de bordure de 2.

Exemple avec positionnement :

xml
<svg width="200" height="150">
  <rect x="30" y="20" width="140" height="100" fill="green" />
</svg>

Dans cet exemple, le rectangle est positionné à partir de 30 pixels à gauche et 20 pixels en haut.

Exemple avec coins arrondis :

xml
<svg width="200" height="150">
  <rect x="20" y="20" width="160" height="100" rx="10" ry="10" fill="orange" />
</svg>

Ici, les attributs rx et ry définissent le rayon des coins du rectangle, créant ainsi des coins arrondis.

Exemple avec transformation :

xml
<svg width="200" height="150">
  <rect width="100" height="50" fill="purple" transform="rotate(45 50 25)" />
</svg>

Dans cet exemple, le rectangle est tourné de 45 degrés autour du point (50, 25).

Ces exemples illustrent quelques-unes des propriétés et des fonctionnalités de la balise <rect> en SVG. Vous pouvez expérimenter avec d'autres attributs pour personnaliser davantage vos rectangles en SVG.