Le "tracé" le plus générique en SVG est obtenu avec la balise path.

Un exemple

Comme premier exemple, vous pouvez ouvrir ce fichier représentant les départements de France. Faîtes ensuite un clic droit dans la page et sélectionnez "afficher le code source de la page", vous constaterez qu'il s'agit d'une série d'éléments path svg.

Autre exemple

• L'attribut d est l'attribut des données (data) définissant le chemin.
• M signifie "move to" : le "crayon" se place (sans rien tracer) au point ayant les coordonnées qui suivent la lettre M (point de coordonnées (10;10) pour le tracé rouge et point de coordonnées (10;20) pour le tracé vert).
• La lettre L signifie "line to" : on trace un segment entre la dernière position et le point dont les coordonnées suivent la lettre L.

Fermer un chemin

Pour fermer un chemin, on peut terminer l'attribut d avec la lettre Z.

Observez la différence entre les deux chemins :

• Avec L x y, le segment relie la position actuelle A au point B de couple de coordonnées (x;y).
• Avec l x y, le segment relie la position actuelle A au point B tel que le vecteur \( \overrightarrow{AB} \) ait pour couple de coordonnées (x;y) .

La même différence a lieu entre m et M (il n'y a donc pas de différence entre m et M en début de données d car la référence initiale est (0;0) ).

Pour un arc de cercle, on utilise la lettre A suivie de 7 valeurs :

• le rayon
• à nouveau le rayon (le rayon est précisé deux fois car l'outil sert en fait à définir des arcs d'ellipse, d'où les deux rayons qui peuvent être différents)
• une valeur que nous laisserons à 0 (elle est importante pour des ellipses)
• la valeur 0 si l'on s'intéresse à l'arc de moins de 180 degrés et la valeur 1 sinon (deux points sur un cercle définissent en effet toujours deux arcs, dont l'un a un angle au centre de moins de 180 degrés et l'autre de plus de 180 degrés).
• la valeur 0 si l'on trace l'arc dans le sens contraire des aiguilles d'une montre et 1 sinon.
• les coordonnées de la seconde extrémité de l'arc (la première extrémité étant la position "actuelle" dans le chemin).

Pour des arcs d'ellipse, vous pouvez consulter cette page du W3C. Détails.

Comme le rectangle, le polygone, l'arc d'ellipse... les courbes de Bézier sont des objets mathématiques fortement utilisés en production d'images.

Pour en savoir plus sur les courbes de Bézier, vous trouverez de nombreux documents sur le web. Par exemple, sur wikipedia.

Nous ne détaillerons pas ici le principe et nous contenterons de donner quelques exemples dans le cas quadratique (lettre Q) et le cas cubique (lettre C).

Un exemple

Pour vous familiariser avec ces courbes de Bézier, commencez par les manipuler avec l'éditeur svg-editor. Utilisez pour cela l'outil pour les path