Les formes

Un rectangle se définit avec une balise <rect />. Il doit avoir 4 attributs :

• x, la coordonnée horizontale du coin supérieur gauche du rectangle ;
• y,la coordonnée verticale du coin supérieur gauche du rectangle ;
• height, la hauteur du rectangle (en pixels) ;
• width, la largeur du rectangle (en pixels).

Un exemple :

Code : XMLLogiquement, si height et width sont égales, un carré sera dessiné.

Comme vous le voyez, le rectangle est dessiné en noir, car c'est la valeur par défaut. Nous apprendrons à les colorier différemment dans le prochain chapitre, avec du CSS.

On peut aussi rajouter deux attributs, rx et ry, qui sont utilisés pour arrondir les coins du rectangle. Vous pouvez n'en mettre qu'un seul, car l'ordinateur met automatiquement la valeur de celui qui n'est pas défini égale à l'autre :

Code : XML
SI vous enregistrez ce code en SVG, et que vous l'ouvrez dans votre navigateur, vous verrez que le rectangle est colorié en noir, car il n'a aucun attribut de style. Nous apprendrons à styliser nos formes dans les prochains chapitres.

Une ellipse, qui s'inclut avec la balise <ellipse />, doit aussi avoir 4 attributs :

• cx, la coordonnée horizontale du centre du cercle ;
• cy, la coordonnée verticale du centre du cercle ;
• rx, le rayon horizontal de l'ellipse ;
• ry, le rayon vertical de l'ellipse.

Je suis si gentil que je vous ai fait un beau schéma :
<image>uploads/fr/files/7001_8000/7285.jpg </image>

Si l'on indique le même nombre dans rx et ry , on obtient donc un cercle.
Exemples :

Code : XML
Ici, je ne vous ai pas mis la déclaration XML et le <!DOCTYPE>, je crois que l'on peut s'en passer maintenant.

Une ligne, en SVG, se définit à l'aide de la balise <line />.
On en indique le début et la fin avec 4 attributs.

• x1, la coordonnée horizontale du point de départ de la ligne ;
• y1, la coordonnée verticale du point de départ de la ligne ;
• x2, la coordonnée horizontale du point de fin de la ligne ;
• y2, la coordonnée verticale du point de fin de la ligne.

Petit shéma :


Exemple :

Code : XML
Cette ligne irait du point (20, 80) jusqu'au point (130, 200).

Les lignes brisées

Une ligne brisée est un ensemble de droites reliées. C'est la balise <polyline /> qui permet de définir une ligne brisée.
Cette fois, un seul attribut est requis : c'est points. Cet attribut indique les coordonnées de chaque point de la ligne brisée, séparées par des virgules et des espaces.

Un exemple :

Code : XML
Ici, la ligne commencera au point (50,50) puis ira au point (200,100), etc., et finira au point (400,60).

Les polygones

Un polygone ressemble beaucoup à une ligne brisée. Comme elle, il n'a besoin que d'un attribut, points, qui indique les points du polygone. La seule différence est que le navigateur trace lui-même une ligne du dernier point vers le premier point, pour fermer le polygone. On le définit avec la balise <polygon />.

Exemple :

Code : XML
Le polygone commencerait au point (0,0), puis irait jusqu'au point (40,20), etc., irait jusqu'à (40,60), puis le navigateur tracera une ligne de (40,60), le dernier point vers (0,0), le premier point du polygone.

Un tracé est encore plus général qu'une ligne brisée. En effet, il permet non seulement de dessiner des droites, mais aussi des courbes. On l'introduit avec la balise <path />.
C'est l'attribut d qui indique les commandes (lignes, courbes, etc.) à effectuer pour dessiner le tracé. Ces commandes sont très variées. Regardons-les en détails...

La commande moveto (M)

La commande moveto (move to, "bouger vers" en anglais) établit un nouveau point courant. (Je vous expliquerai plus tard ce que c'est.)
On note :

Code : XMLIci, (200,300) sont les coordonnées du nouveau point courant à établir.

Cela permet de réduire la taille de vos fichiers et à l'ordinateur de faire moins de calculs. Que du bon, quoi ! Je vous encourage donc fortement à utiliser les coordonnées relatives.

Les lignes

La commande lineto (L)

Elle trace une ligne du point courant vers un autre.

C'est simplement la dernière coordonnée indiquée dans l'attribut d. Cela peut être soit un moveto, ou la fin d'une ligne, d'une courbe, etc.

Un exemple :

Code : XMLCe code tracera une ligne du point courant (100,100) vers le point (400,150).

Les commandes H et V

Elles sont utilisées pour dessiner des lignes horizontales (H) et verticales (V) seulement. Je vous encourage aussi à les utiliser car elles réduisent la taille de vos fichiers. Leur fonctionnement est similaire à lineto.

Pour fermer vos tracés (Z)

La commande closepath (Z) est un raccourci qui trace une ligne du point courant vers le point spécifié avec la dernière commande moveto. Il n'a besoin d'aucune coordonnée.

Exemple :

Code : XMLVous remarquerez que j'ai utilisé des lineto horizontaux et verticaux, et que j'ai utilisé des coordonnées relatives, sauf pour le premier moveto bien entendu.

Les courbes

Les courbes sont un peu plus difficiles à comprendre. En effet, vous devez savoir quel type de courbe vous voulez dessiner. Et il en existe trois.

Les courbes quadratiques de Bézier (Q et T)

Une courbe quadratique de Bézier, ça ressemble à ça :


On introduit ce type de courbe avec la commande Q, qui trace une courbe à partir du point courant. Vous devez indiquer deux coordonnées :

• un point de contrôle ;
• le point de fin de la courbe.

Je vois déjà vos yeux s'écarquiller de terreur...

Pas de panique, amis Zéros ! Je vais tout vous expliquer. Pour vraiment illustrer mes propos, je dirais qu'un point de contrôle est un point qui "tire" sur la courbe. Essayez le code suivant :

Code : XML

Citation : Vous
C'est tout à fait normal. En effet, le point de contrôle est situé sur la ligne imaginaire qui va du point courant vers le point de fin de courbe. Si vous changez les coordonnées du point de contrôle, celui-ci semble tirer la courbe vers lui.

Il existe une autre commande pour dessiner des courbes quadratiques : T. C'est une sorte de raccourci. En effet, vous devez seulement indiquer une coordonnée : le point de fin de la courbe. Le point de contrôle est calculé comme étant le point image selon une symétrie centrale du point de contrôle de la courbe q précédente.


Petit schéma pour les visuels :



Et un exemple :

Code : XML

Les courbes cubiques de Bézier (C et S)

Là, c'est (un peu) plus compliqué ! Une courbe de Bézier cubique, comme ça :


est introduite avec une commande C, et a besoin de trois coordonnées :

• un point de contrôle en début de courbe ;
• un point de contrôle en fin de courbe ;
• un point de fin de courbe.

Chaque point de contrôle tire sa moitié de la courbe vers lui.

Exemple :

Code : XML

Il existe aussi une commande raccourcie, (qui se comporte comme T), mais pour les courbes cubiques ; c'est S. Vous devez indiquer seulement le deuxième point de contrôle et le point de fin de courbe, le premier point de contrôle étant l'image par symétrie centrale du deuxième point de contrôle de la courbe précédente.

Encore un beau schéma :



Et l'exemple qui va avec :

Code : XML

Les arcs elliptiques (A)

Un arc elliptique, c'es une partie d'ellipse, comme ceci :

C'est la dernière commande que nous apprendrons, et probablement la plus compliquée, car elle nécessite six paramètres (je dis paramètres, car cette fois ce n'est pas seulement des coordonnées comme les autres commandes.)
Les voici :

• le rayon horizontal de l'ellipse ;
• le rayon vertical de l'ellipse ;
• l'angle de rotation de l'ellipse par rapport à l'horizontale (degré) ;
• la valeur du drapeau-large de l'arc (0 ou 1) ;
• la valeur du drapeau-balayage de l'arc (0 ou 1) ;
• le point de fin de l'arc elliptique.

En code, ça fait comme ceci :

Code : XML


Voici ce que le navigateur prend en compte pour dessiner un arc elliptique :

• l'arc commence au point courant, et se termine au point de fin (la dernière coordonnée de la commande) ;
• l'ellipse de l'arc a comme rayon les deux premiers paramètres de la commande (qui sont équivalents aux attribut rx et ry d'un élément <ellipse />) ;
• l'ellipse est retournée du nombre de degrés indiqué avec le troisième paramètre.

Souvent, il advient que 4 arcs soient possibles, sur 2 ellipses différentes, avec ces indications seulement. C'est ici qu'interviennent les valeurs de drapeau-large et de drapeau balayage.
Voilà un petit schéma que j'ai traduit (du W3C) :