Pour définir un dessin de rectangle en SVG
(de côtés parallèles aux bords de l'écran), on utilise une balise
<rect />, on identifie l'abscisse et l'ordonnée du coin supérieur gauche
avec x et y, on précise la largeur (longueur du côté parallèle au
bas de l'écran) avec l'attribut width et la hauteur (longueur du côté parallèle
au bord vertical de l'écran) avec l'attribut height.
On peut également préciser des valeurs pour les attributs
rx et ry. La lettre r désigne ici un rayon :
on peut ainsi arrondir les coins des rectangles. rx a pour valeur maximale
la moitié de la valeur de width et ry la moitié de la valeur de height.
Exemple de code
On a utilisé ci-dessus l'attribut de style (propriété css) opacity :
- à la valeur 0, on obtient un objet transparent,
- à la valeur 1 (valeur par défaut), un objet opaque (notamment il masque les objets derrière lui, essayez en modifiant ci-dessus la valeur d'opacité).
- Les valeurs entre 0 et 1 donnent un objet plus ou moins transparent laissant deviner les objets qui sont en-dessous (c'est à dire les objets ayant été définis plus tôt dans le code et sur des "zones communes").