Formes
Définition : Rectangle
1
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" />
x,y : coordonnées de départ
rx, ry : arrondis des coins
width, height : largeur et hauteur
SVG - Rectangle
Définition : Disque
1
<circle cx="50" cy="50" r="40" />
cx,cy : coordonnées du centre
r : rayon
SVG - Cercle
Définition : Ellipse
1
<ellipse cx="150" cy="80" rx="100" ry="50" />
cx,cy : coordonnées du centre
rx, ry : rayon horizontal et vertical
SVG - Ellipse
Définition : Ligne
1
<line x1="10" y1="10" x2="100" y2="100" stroke="black" />
x1,y1 : coordonnées du point de départ
x2, y2 : coordonnées du point d'arrivé
stroke : couleur du trait
SVG - Ligne
Définition : Polygone
1
<polygon points="150,10 250,150 150,110 50,150" />
points : coordonnées des différents coins x1,y1 x2,y2 x3,y3 ...
SVG - Polygone
Définition : Polyligne
1
<polyline fill="none" stroke="black" points="150,10 250,150 150,110 50,150" />
points : coordonnées des différents points joints par un trait x1,y1 x2,y2 x3,y3 ...
fill : remplissage de la forme créée par le trait
stroke : couleur du trait
SVG - Polyline