Le format SVG : les formes de base

Dans un SVG on dispose d’un ensemble de balises (de tags), qui permettent de définir des éléments graphiques dans un espace 2D. Une partie de ces tags permettent de dessiner des formes courantes : ellipses, rectangles, cercles, ou polygones. Ces tags possèdent des attributs, comme en html, qui permettent de définir leur taille, couleur, contour et remplissage.

<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.