Le format SVG permet d’afficher dans des pages html, des images vectorielles, mais aussi de les manipuler dans le DOM. L’image est contenue dans une paire de balises:

Dans cette balise on doit obligatoire mettre pour être reconnue par le DOM, la référence de sa norme, version du SVG ainsiq ue la hauteur et la largeur de la vue VieuwBox, ce qui donne

Dans le format SVG les images sont créées en codes et en coordonnées. Le point de référence est le coin en haut et à gauche. Il existe des formes déjà prédéfinis sous forme de balises. La première formes est le rectangle, qui peut être aussi un carré.

Note : Pour toutes les formes, on peut rajouter les arguments, stroke définissant la couleur du contour et stroke-width son épaisseur, et fill pour la couleur de remplissage, que l’on peut mettre à transparent pour afficher la couleur du fond.

Pour dessiner un rectangle il lui faut passer des arguments, x=coordonnées horizontales et y=coordonnées verticales du point de départ du rectangle, puis widh pour sa longueur et height pour sa hauteur.
On peut aussi rajouter des coins arrondis a cette forme en renseignant rx et ry pour les rayons des coins horizontaux et verticaux.
Ce qui donne pour pour dessiner un rectangle:

Ce qui donne en visuel, en SVG:

On peut aussi dessiner des cercles avec plusieurs attributs, cx et cy pour les coordonnées du centre du cercle et r le rayon du cercle et naturellement avec tous les attributs de couleur et de contours, ce qui donne pour écrire le code:

et sous ça forme SVG: