Accueil

Dessiner avec SVG - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

SVG : la balise path

Pour info la feuille de style interne à cette page :

	.style1 {stroke : olive ; stroke-width:4px;  fill:none; }
	.style2 {fill : olive ; fill-opacity : 0.5;  }

Nous allons maintenant introduire la balise path (chemin).

Grâce à cette balise on peut réaliser des formes complexes : courbes de Bézier, arcs elliptiques,etc.

Mais la balise path peut aussi remplacer avantageusement les balises line, polygon, polyline

Exemple de forme produite par la balise path

Sachez simplement pour le moment que ce "chemin" est une succession de segments et de courbes quadratiques.

La notation en absolu du cheminExemple plus simple

Mais commençons par un exemple simple pour présenter cette balise.
Dessinons des segments et des triangles avec cette balise La balise path path non fermé : pas de commande Z path fermé : commande Z à la fin Ligne produite avec la balise path

Le code correspondant

<svg width="400px" height="400px"> <title>La balise path </title> <desc>path non fermé : pas de commande Z</desc> <path d="M 40,40 L 150,100 L 100,280" fill ="none" stroke ="green"/> <desc>path fermé : commande Z à la fin </desc> <path d="M 240,40 L 350,100 L 300,280 Z" fill ="none" stroke = 'red' stroke-linejoin = 'round' stroke-width ="10" stroke-dasharray = "5 5"/> <desc>Ligne produite avec la balise path</desc> <path d="M 50,300 L350,300" stroke = 'navy' stroke-linecap = 'round' stroke-width ="10" /> </svg>

Nous avons trois formes : deux triangles et une ligne
Le premier triangle est ouvert (manque un segment) et le deuxième est fermé;

Un chemin peut comprendre plusieurs commandes L mais toujours une seule commande M.
Vous pouvez notez que l'attribut stroke-linecap peut être utilisé avec la balise path pour dessiner un segment unique.
L'attribut stroke-linejoin peut être utilisé avec un chemin dessinant des angles (au moins deux segments).
La virgule séparant l'abscisse de l'ordonnée est facultative. Donc vous pouvez parfaitement écrire les chemins de la façon suivante , par exemple : "M 240 40 L 350 100 L 300 280 Z"

Chemin avec des verticales et horizontales

SVG - balise path - Tracer des lignes horizontales et verticales avec les commandes H et V path fermé composé de droites horizontales et verticales path ouvert composé de droites horizontales et verticales

Le code SVG correspondant

<svg width="400" height="400"> <title>SVG - balise path - Tracer des lignes horizontales et verticales avec les commandes H et V</title> <desc>path fermé composé de droites horizontales et verticales</desc> <path d= "M 100,100 H 200 V 200 H 100 Z" fill ="none" stroke ="red" /> <desc>path ouvert composé de droites horizontales et verticales</desc> <path d= "M 200,250 H 300 V 350 H 200" fill ="none" stroke ="blue"/> </svg>

Lorsque un chemin consiste en une succession de segments horizontaux ou verticaux utilisez les commandes H et V à la place de L.
Il y a en effet la commande H (comme Horizontal) et la commande V (comme Vertical) qui remplacent avantageusement la commande L (comme Lineto).
Les commandes H et V doivent être suivies d’un seul nombre : l'abscisse (pour la commande H) ou l'ordonnée (pour la commande V) du point d’arrivée du segment.

SVG : chemin exprimé en relatif

Définir dans un path les coordonnées x et y en absolu de chaque point (c'est à dire par rapport à l'arête supérieure gauche de la zone de dessin) est une opération délicate et qui exige de réaliser au préalable un croquis sur papier à petits carreaux.
Mais, bonne nouvelle, il est possible d'exprimer les coordonnées d'un point de façon relative c'est à dire d'exprimer ses coordonnées par rapport au précédent point. Ce qui, vous en conviendrez, beaucoup plus simple pour l'esprit humain.
Il est aussi possible de mélanger dans un path les coordonnées relatives et absolues mais je vous le déconseille.
Pour préciser que les coordonnées d'un point sont exprimées en relatif il faut écrire les commandes en minuscule (l,h,v).

Attention les coordonnées x et y du point de départ du chemin c'est à dire les coordonnées qui suivent la commande M doivent toujours être exprimées en absolu.

Exemple

SVG - balise path - notation en relatif des coordonnées du chemin dessiner un escalier : notation en relatif dessiner un zigzag : notation en relatif

Le code SVG de l'exemple

<svg width="400px" height="300px" > <title>SVG - balise path - notation en relatif des coordonnées du chemin </title> <desc>dessiner un escalier : notation en relatif </desc> <path d="M 10,10 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 h 20 v 20 z" class ="style1" /> <desc>dessiner un zigzag : notation en relatif </desc> <path d="M 10,280 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20 l 20,20 l 20,-20" class ="style1" /> </svg>

Chaque balise path a deux attributs : d et class !
Dans l'attribut d les commandes h,v, l sont écrites en minuscules !

Dans le premier path on une alternance : h 20 v 20
Dans le deuxième path on a une alternance : l 20, -20 l 20,20
Le premier chemin est fermé (commande z) ; ce qui n'est pas le cas du deuxième chemin (absence de commande z).

La virgule séparant l'abscisse de l'ordonnée est facultative. Donc vous pouvez parfaitement écrire les chemins de la façon suivante, par exemple : "M 10 280 l 20 -20 l 20 20 l 20 -20 ... "

Dessiner des courbes de Bézier (quadratique et cubique)

Comme vous savez il existe deux types de courbes de Bézier : les courbes quadratiques et les courbes cubiques.

Courbes quadratiques

Exemple

image SVG

Le code du fichier SVG inséré dans la page

... <style> path{ stroke:black; stroke-width:4px; fill:none; } </style> <circle cx = '50%' cy = '50%' r= '40' fill ='skyblue'/> <circle cx = '50%' cy = '50%' r= '6' fill ='black'/> <path d="M 100,100 Q 200,5 300,100"/> <path d="M 100,100 Q 200,195 300,100"/> </svg>

Comme dans tout path la commande Q est précédée de la commande M avec les coordonnées du point de départ.

Pour comprendre le fonctionnement d’une courbe quadratiques il faut imaginer un segment de métal qui, attiré par un aimant (le point d'inflexion), se courbe vers ce point aimant (sans jamais le toucher).
Dans l'exemple Les deux points d'inflexion ont la même abcsisse (200) mais des ordonnées opposées : 5 et 195.
Donc la première ligne se courbe vers le haut et la deuxième se courbe vers le bas.

Feuille de style dans un fichier SVG

Notez que le fichier SVG contient une feuille de style.

Dans un fichier SVG la feuille de style CSS doit être l'intérieur du conteneur STYLE (comme dans un fichier HTM !).
Une règle de style en ligne (attribut style) est aussi possible (comme dans un fichier HTM !).
Vous pouvez aussi mettre en forme un objet SVG via une classe.

Courbes cubiques avec SVG

Exemple

image SVG

Le code du fichier inséré dans la page

... <svg width ="300" height ="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <style> path {fill : none ; stroke-width : 2 ; } .rouge {stroke : red ; } .bleu {stroke : blue ; } .verte {stroke : green; } </style> <title>courbe de Bézier avec SVG</title> <path d="M 0,100 C 100,50 200,150 300,100" class ='rouge'/> <path d="M 0,100 C 100,0 200,200 300,100" class ='bleu'/> <path d ="M 0,100 c100,-150 200,150 300,0" class ="verte" /> </svg>

Les courbes de Bézier cubiques (ou tout simplement "courbes cubiques") sont semblables aux courbes de Bézier quadratiques à la différence qu’il y a deux points aimants.

Comme dans tout chemin la commande C est précédée de la commande M avec les coordonnées du point de départ.

Dans l'exemple les trois courbes cubiques ont le même point de départ et le même point d'arrivé mais la courbe de couleur bleue est plus creusée que la rouge car les ordonnées de ses deux points d'inflexion sont respectivement 0 et 200 alors que ces mêmes ordonnées sont seulement 50 et 150 pour la courbe rouge.

Faut-il rappeler que la commande c peut être écrite en minuscules suivie des coordonnées en relatif des points d'inflexion et du point d'arrivée c'est à dire par rapport au point de départ.
C'est la technique que j'ai réalisé pour la courbe verte.

Pour cette courbe verte les ordonnées des points d'inflexion sont respectivement -150 et 150 par rapport à l'ordonnée du point d'origine alors qu'elles sont -50 et 50 pour la courbe rouge et -100 et 100 pour la courbe bleue.
C'est pour cette raison que c'est la courbe verte la plus creusée.

Arcs de cercle et arcs d'ellipse

Avec la balise path on peut réaliser aussi des arcs d'ellipse et des arcs de cercle.
La syntaxe peut paraitre compliquée à priori. Mais rassurez vous avec un peu de pratique ça devient logique.

Lorque avec le logiciel de dessin vectoriel Inkscape vous dessinez un arc ou un camembert vous créez un arc elliptique c'est à dire un "path" avec la commande A (A comme Arc).

Dans la première forme l'un des arcs d'ellipse est fermé (celui en pointillés verts).
Dans la deuxième forme l'un des arcs de cercle est fermé (celui en pointillés rouges).

Le code SVG correspondant (écrit directement dans la page)

<svg width = '60%' height = 'auto' style ="border :1px solid black;" viewBox ="0 0 400 400"> <ellipse cx ="60" cy ="50" rx ="50" ry="20" fill ="none" stroke ="black" /> <path d ="M10,50 A 50 20 0 1 1 110,50" fill ="none" stroke ="red" stroke-width ="4" stroke-dasharray ="5 5"/> <path d ="M10,50 A 50 20 0 0 0 110,50 Z" fill ="none" stroke ="green" stroke-width ="4" stroke-dasharray ="5 5" /> <circle cx ="60" cy ="150" r ="50" fill ="none" stroke ="black" /> <path d ="M10,150 A 50 50 0 1 1 110,150 Z" fill ="none" stroke ="red" stroke-width ="4" stroke-dasharray ="5 5" /> <path d ="M10,150 A 50 50 0 0 0 110,150" fill ="none" stroke ="green" stroke-width ="4" stroke-dasharray ="5 5" /> <ellipse cx ="60" cy ="300" rx ="50" ry="20" fill ="none" stroke ="black" /> <path d ="M 10,300 a 50 20 -45 1 1 100,0" fill ="none" stroke ="green" stroke-width ="4" /> <path d ="M 10,300 a 50 20 -30 1 1 100,0" fill ="none" stroke ="lime" stroke-width ="4" /> <path d ="M 10,300 a 50 20 -75 1 1 100,0" fill ="none" stroke ="olive" stroke-width ="4" /> <path d ="M 10,300 a 50 20 45 0 0 100,0" fill ="none" stroke ="orange" stroke-width ="4" /> <path d ="M 10,300 a 50 20 30 0 0 100,0" fill ="none" stroke ="red" stroke-width ="4" /> <path d ="M 10,300 a 50 20 75 0 0 100,0" fill ="none" stroke ="pink" stroke-width ="4" /> </svg>

Commentaire

Ci-dessus deux arcs elliptiques inscrits dans une ellipse puis deux arcs de cercle inscrits dans un cercle et enfin six arcs d'ellipse ayant subi une rotation.

Pour dessiner des arcs d'ellipse (de cercle) il faut employer la balise path avec la commande A (A comme arc).
La lettre A est précédée des coordonnées X,Y du point de départ de l'arc.

Pour les quatre premiers arcs le troisième paramètre est 0 (pas de rotation de l'arc).
Par contre pour les six derniers arcs d'ellipse le troisième paramètre est différent de zéro. Ce qui veut dire que l'arc subit une rotation par rapport à l'axe des ordonnées.
Les trois arcs "verts" (lime, green, olive) sont dessinés dans le sens des aiguilles d'une montre tandis que les trois arcs "rouges" (red, orange, pink) sont dessinés dans le sens contraire. Donc dans un premier cas les quatrième et cinquième paramètres valent 1 tandis que dans le second cas ils valent 0.
De plus la lettre a est minuscule. Donc le point d'arrivé de l'arc est exprimé en relatif (par rapport au point de départ) ; 100 à droite et même hauteur par rapport au point de départ donc les cordonnées relatives sont : 100,0