Pour déssiner un simple rectangle en SVG, on utilise une balise <svg> qui permet de définir un conteneur et, à l'intèrieur, une balise <rect> qui accepte les attributs width (largeur) et height (hauteur), un identifiant unique (id) et une couleur de remplissage (fill).
Faites en sorte que la taille du conteneur (svg) soit plus grande que celle du contenu - le rectangle :-)


Source: David Rousset

Un rectangle SVG avec du texte

Vous noterez que le texte est sélectionnable.

Coins arrondis

Pour aller plus loin, vous pouvez rajouter les attributs rx="20" ry="20" à la balise SVG rect afin d'avoir des coins arrondis.

Bordures

Vous pouvez aussi rajouter une bordure à la balise rect (ou svg) comme ceci :

pour aller plus loin...

• Voir un exemple de rectangle SVG chez w3schools