SVG : la balise path

Nous allons maintenant introduire la balise path (chemin) de la spécification SVG.
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 polygon, polyline pour dessiner des chemins ouverts ou fermés (polygones).

Exemple de forme complexe produite par la balise path

L'instruction path est la suivante (la zone de dessin fait 400 par 300): <svg width ="60%" height ="auto" viewBox= "0 0 400 300" > <path d ="M 100,50 L 200,50 L 200,100 Q 300,150 200,200 Q 150,250 200,300 L 100,300 Z" class="style1"/> </svg>

Donc une seule instruction pour dessiner une forme complexe !
style1 est une classe définie dans la feuille de style interne de la page.
Règle de style correspondante : .style1 {stroke : olive ; stroke-width:4px; fill:none; }

La notation en absolu du chemin

Exemple de notation en absolu de chemins

Le code correspondant

<svg width="60%" viewBox = "0 0 400 400"> 
	...
	<path d="M 40,40 L 150,100 L 100,280" fill ="none" stroke ="green"/>
	<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"/> 
	<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é;

path

M veut dire moveTo et cette commande est suivie des coordonnées x et y du point de départ du chemin
L veut dire lineTo et cette commande est suivie des coordonnées x et y du point d'arrivée de la ligne
Z veut dire closePath C'est à dire que si la commande Z est mentionnée un segment est tracé entre le dernier et le premier point. En d'autres termes utilisez Z pour dessiner un polygone sinon vous créer une forme ouverte.

Un chemin peut comprendre plusieurs commandes L mais toujours une seule commande M.
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".

La balise path peut comprendre d'autres attributs que "d" : class, id, style, fill, stroke, etc.

Chemin avec des verticales et horizontales

Le code SVG correspondant

<svg width="60%" viewBox ="0 0 400 400">
<title>SVG - balise path - Tracer des lignes horizontales et verticales avec les commandes H et V</title>
<desc>polygone  composé de droites horizontales et verticales</desc>
		<path d= "M 100,100 H 200 V 200 H 100 Z" fill ="none" stroke ="red" />
<desc>ligne brisée  composée 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.

Les commentaires dans le code SVG

Observez attentivement le code SVG ci-dessous !
J'ai utilisé la balise double title pour un commentaire général de l'image vectorielle, son titre.
J'ai utilisé la balise double desc pour commenter chaque instruction basée sur la balie path, sa description.
Ces deux balises ne peuvent contenir que du texte ; ce sont des commentaires.

Notation en relatif de chemins

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.
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 de notation en relatif du chemin

Le code SVG correspondant

<svg width="60%" viewBox ="0 0 400 300"> 
<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 ... "

Utilisez Inkscape pour produire le code correspondant aux chemins

Comme vous le constatez le code SVG devient un peu plus complexe mais, bonne nouvelle, vous pouvez demander à un logiciel d'encoder à votre place. Je veux parler de Inkscape mais il existe aussi Adobe Illustrator. Le premier est gratuit tandis que le deuxième est payant.
Inkscape est un programme qui permet de produire des images vectorielles au format SVG.
Il comprend un éditeur WYSIWIG c'est à dire que vous dessinez des formes et le programme génère un fichier encodé en SVG.

Mon site propose un tutoriel sur le logiciel Inkscape :
Inkscape : éditeur WYSIWIG de SVG

Insertion d'un document Inkscape dans la page web

Ci-dessous j'ai inséré dans la page un document Inkscape intitulé "svg_par_inkscape.svg".

J'ai inséré ce document via la balise IMG, j'aurais pu utilisé aussi IFRAME ...
Instruction HTML pour insérer le fichier Inkscape :
<img src ="svg_par_inkscape.svg" class ="centre" style ="border : 1px solid black;" >

Le code SVG du document Inkscape

Ci-dessous le code SVG de ce fichier : <svg width="900" height="600" version="1.1" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg"> <g fill="none"> <path d="m258 242c-25 16-51 36-82 36-25 0.19-45-17-61-33-4.6-4-8.8-9.5-8.8-9.5v-200c49 69 99 138 148 207 0.24 2.8 2.5 1.1 3.7 0.39z" stroke="#f0f" stroke-linejoin="bevel" stroke-width="10"/> <g stroke="#000"> <path d="m381 41c53-0.52 106-1 159-1.5 0.56 38 1.1 77 1.7 115-53 0.33-107 0.6-160 0.91l1.5-9e-3" stroke-width="5"/> <path d="m541 258c9 43 18 87 23 108 4.5 21 4.5 21 24-1 19-22 57-64 91-67 34-3.5 62 32 86 29s41-44 50-64c8.5-20 7.7-19 7-18" stroke-linecap="round" stroke-width="10"/> <path d="m68 300 3.9 142 111-143 33 139 79-126v0" stroke-linecap="round" stroke-width="10"/> </g> </g> </svg>

Inkcape crée des regroupements (balise G) pour mettre en facteur commun certains attributs.
Ici fill ="none" s'applique aux quatre chemins.
stroke ="#000" (noir) s'applique aux trois derniers chemins

Je n'étais pas obligé d'insérer le document Inkscape dans la page HTML, je pouvais simplement coller le code SVG de ce document dans le document HTML.
Après collage, il faut cependant procéder une modification mineure : valeur de l'attribut width remplacée par "60%" afin que l'image devienne "responsive" et valeur de height passe à "auto".

Rendu avec du code SVG interne

Notez que dans les deux cas (SVG externe ou SVG interne à la page) le rendu est strictement identique !

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

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

<svg width ="400" height ="200" 	
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" >
<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>

xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"

Si vous utilisez Inkscape le document obtenu comprendra forcément ces espaces de noms.

Notez qu'un fichier SVG peut comporter une feuille de style.
Il faut bien sûr utiliser les propriétés CSS de mise en forme qui sont spécifiques aux éléments SVG : fill, stroke, etc.
Pour le reste il n'y a aucune différence entre du code SVG interne ou externe.

un cercle rempli de bleu ciel
un cercle beaucoup plus petit rempli de noir
deux courbes de Bézier quadratiques (on dit tout simplement "courbes quadratiques")

Les coordonnées du point aimant (ou point d'inflexion)
les coordonnées du point d'arrivée

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.

Courbes cubiques avec SVG

Exemple

Le code du fichier SVG (extraits) inséré dans cette 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.

coordonnées du premier point d’inflexion
coordonnées x,y du second point d'inflexion
coordonnées x,y du point d’arrivée

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

Pour dessiner des arcs de cercle ou d'ellipse, il y a deux solutions : une très compliquée et une très simple.

Solution très compliquée

La solution très compliquée consiste à encoder soi-même.

Exemple

deux arcs elliptiques : un borduré de rouge et ouvert ; un autre fermé et borduré de vert
deux arcs de cercle : un borduré de rouge et fermé ; un autre vert et ouvert
six arcs d'ellipse ayant subi une rotation

Le code SVG que j'ai du saisir dans la page

<svg width = '80%' viewBox ="0 0 400 400" style ="border :1px solid 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" />

	<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" />
	
	<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

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.

les deux premiers paramètres sont le rayon X et le rayon Y de l'arc d'ellipse (deux valeurs identiques s'il s'agit d'un arc de cercle)
le troisième paramètre est la rotation en degrés (unité non précisée) de l’axe X de l’ellipse par rapport à l’axe des ordonnées.
Donc si vous voulez un arc non incliné la valeur sera 0
le quatrième paramètre indique s'il faut afficher l’arc qui mesure plus de la moitié du périmètre (valeur : 1) ou l’arc qui mesure moins de la moitié du périmètre (valeur: 0)
le cinquième paramètre indique si l’arc doit être dessiné dans le sens des aiguilles d'une montre (valeur : 1) ou dans le sens contraire (valeur : 0)
Les deux derniers paramètres sont les coordonnées du point d’arrivée de l'arc.
Donc dans le cas de demi-ellipse pour calculer l'abcsisse de ce point d'arrivée il suffit d'ajouter à celle du point de départ le double du rayon horizontal

Solution plus simple

J'en conviens, le code SVG devient un peu compliqué ...
Aussi je vous propose une astuce pour un encodage SVG plus simple.

dessiner un cercle OU une ellipse
masquer partiellement cette première forme par une autre forme de même couleur de fond que celle de la zone de dessin SVG.

Exemples

Deux canevas SVG de front. L'un présente un arc de cercle (clair de lune) et l'autre un arc d'ellipse.

Le code correspondant

Le code CSS :
une classe définie comme suit : svg.front {display : inline-block ; margin : 10px ; }

Le code SVG : <svg class ="front" width="45%" viewBox ="0 0 300 200" style ="background : navy; " > <circle fill ="yellow" cx ="150" cy ="100" r ="50" /> <circle fill ="navy" cx ="200" cy ="100" r ="50" /> </svg> <svg class ="front" width="45%" viewBox ="0 0 300 200" > <ellipse fill ="purple" cx ="150" cy ="100" rx ="50" ry ="100" /> <rect fill ="white" x= "100" y ="100" width ="100" height="100" /> </svg>

Comme le premier canevas a comme couleur de fond "navy", le cercle (qui masque partiellement le rond jaune) doit être rempli de cette même couleur.
Le deuxième canevas n'a pas de couleur de fond défini donc par défaut c'est "white".

Troisième solution

Vous vous en doutez, la troisème solution consiste à faire appel à Inskcape pour générer le code SVG.
Vous dessinez des ellipses puis vous convertissez en arcs d'ellipse et en précisant le type d'arc (camembert, arc ouvert, corde).
Si vous enregistrer le document au format "SVG optimisé" vous obtenez un code succinct et propre.
Il suffit ensuite d'ouvrir le document Inkscape via un éditeur tel NotePad puis de copier-coller ce code SVG dans votre page HTML.
Ci-dessous 4 formes dont une ellipse complète et trois arcs d'ellipse.

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

SVG : la balise path

Exemple de forme complexe produite par la balise path

La notation en absolu du chemin

Exemple de notation en absolu de chemins

Le code correspondant

Chemin avec des verticales et horizontales

Le code SVG correspondant

Les commentaires dans le code SVG

Notation en relatif de chemins

Exemple de notation en relatif du chemin

Le code SVG correspondant

Utilisez Inkscape pour produire le code correspondant aux chemins

Insertion d'un document Inkscape dans la page web

Le code SVG du document Inkscape

Rendu avec du code SVG interne

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

Courbes quadratiques

Exemple

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

Courbes cubiques avec SVG

Exemple

Le code du fichier SVG (extraits) inséré dans cette page

Arcs de cercle et arcs d'ellipse

Solution très compliquée

Exemple

Le code SVG que j'ai du saisir dans la page

Commentaire

Solution plus simple

Exemples

Le code correspondant

Troisième solution