<rect x="10" y="10" width="30" height="30" stroke="black" fill="red" stroke-width="5"/>Remarquez que les tags sont uniques : il n’y a pas de tag fermant. Du coup, le tag DOIT se terminer par "/>" pour indiquer sa fermeture à l’intérieur du tag même.
Rect possède une série d’attribut assez explicites. Stoke définit la couleur du contour, fill la couleur de remplissage, stroke-width l’épaisseur.
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />Circle utilise les attibuts cs et cy au lieu de x et y, car on définit le centre du cercle et non le coin supérieur gauche de la forme. r permet de déterminer le rayon.
<ellipse cx="125" cy="130" rx="190" ry="45" stroke="green" stroke-width="4" fill="yellow" />L’ellipse permet de définir la largeur et la hauteur indépendamment avec rx et ry.
<line x1="10" y1="110" x2="50" y2="150" stroke="orange" stroke-width="5"/>Une ligne se définit par 4 points : les coordonnées x1 et y1 déterminent le point de départ, x2 et y2 le point l’arrivée de la ligne.
<polyline points="10 10 10 200 200 200 200 10" stroke="orange" fill="transparent" stroke-width="5"/>Polyline dessine une ligne brisée : les coordonées s’inscrivent dans l’attribut "points". On dessine autant de points que nécessaire, séparé par des espaces : x1 y1 x2 y2 x3 y3 etc.
<polygon points="10 10 10 20 40 20 40 200 60 200 60 20 90 20 90 10" stroke="green" fill="transparent" stroke-width="5"/>Polygon est proche de polyline, mais le tracé sera fermé entre le premier point et le dernier point automatiquement, fermant la forme.