Accueil

Traduction

Dessiner avec SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

SVG : Les formes de base

Dans ce chapitre je vais vous montrer comment encoder du SVG directement dans une page web pour dessiner :

Je n'aborderai pas dans ce chapitre le SVG externe c'est à dire le code SVG dans des fichiers d'extension .svg. En effet le code correspondant est en général produit via des logiciels tels Inkscape ou Boxy SVG.
Sachez qu'il n'y a aucune différence entre un code SVG interne ou externe sauf au niveau de la balise SVG début. Dans le cadre d'un fichier SVG, cette balise doit comporter certains "namespace" (espaces de nom) obligatoires.

La feuille de style de la page

Première règle de style : par défaut la balise SVG de la norme HTML5 est de type "inline". Je la transforme en élément "block" afin de pouvoir lui appliquer le centrage horizontal (margin : auto).

Deuxième règle de style : je définis une classe "joli" ; classe spécifique aux éléments rect (balises SVG pour dessiner des rectangle (et carrés).
J'expliquerai plus tard le sens des ces propriétés CSS (fill, stroke, etc.) ; propriétés qui ne peuvent s'appliquer qu'à des éléments SVG !

Dessiner des rectangles

Deux rectangles dessinés dans un canevas SVG

Faites un clic droit sur l'image vectorielle. Dans le menu contextuel la commande "enregistrer l'image sous ..." n'apparaît pas.
En effet ici il ne s'agit pas d'un fichier SVG incorporé dans la page (via les balises IMG ou OBJECT) mais de code SVG écrit directement dans la page (comme c'est possible depuis HTML5).

Code pour dessiner ces rectangles

Code SVG : il doit obligatoirement être à l'intérieur du conteneur SVG qui permet de définir les paramètres de la zone de dessin vectoriel.
Comme je n'utilise pas ici l'attribut fill, les formes sont par défaut remplies de noir.

Concernant le deuxième rectangle, les angles sont arrondis car il y a deux attributs supplémentaires :
rx & ry : rayon horizontal et rayon vertical de chaque arrondi.
Si un seul de ces attributs est précisé ils sont supposés être égaux (rx = ry).

Remarquez que la balise SVG contient l'attribut viewBox et que la valeur de l'attribut width est un pourcentage. Je reviendrai sur cet attribut plus tard. Retenez pour l'instant qu'il s'agit d'une technique pour que le canevas SVG soit 'responsive' (s'adapte à tous les écrans : du smartphone au PC de bureau).
Retenez que les positions et dimensions des formes sont déterminées grâce aux deux dernieres valeurs du viewBox (ici 400 et 200)

Avant de coder

"Sans méthode la pensée erre et l'action tâtonne".

Attention dans une zone de dessin SVG le point d'origine du repère cartésien est le coin haut gauche. svg croquis

Si vous voulez être productif (coder vite et bien) je vous conseille de passer par le stade croquis sur une feuille de papier millimétrée (ou une feuille à petit carreaux) avant de vouloir coder en SVG.

Dessiner des cercles

cercles avec SVG - balise circle

le code SVG correspondant

Pour dessiner un cercle il faut utiliser la balise circle du format SVG.

Nous avons vu dans la page précédente que les formes SVG ont par défaut un fond noir ! Or ici le premier cercle a un fond vert "olive", le second a un fond "aqua" mais à demi transparent, le troisième cercle a un contour "navy" mais à demi transparent et le quatrième cercle a un fond "aqua" avec un contour "navy". Nous avons à cette fin utilisé les attributs de mise en forme.

Attention si vous dessinez un cercle de rayon 40 pixels dont l'épaisseur du contour est 10 pixels le rayon effectif de cette forme sera 45px ! En effet le contour est à la moitié à l'intérieur de la forme et à moitié à l'extérieur de la forme.

Pour les attributs fill-opacity, stroke-opacity la valeur va de 1 (opacité totale) à 0 (transparence totale).

Les paramètres de mise en forme (fill, fill-opacity, stroke, stroke-width, stroke-opacity) peuvent être aussi manipulés comme propriétés !
Ainsi pour colorier le quatrième cercle on utilise les termes stroke, stroke-width, fill comme propriétés de style via l'attribut style.

Si, par exemple, vous voulez un cercle rempli de vert et borduré de rouge avec une bordure de 5 pixels vous pouvez donc écrire :

Pour le premier cercle, les paramètres de style passés en attibuts.
Pour le deuxième cercle, les paramètres de style passés en propriétés (via l'attribut style)

Par contre les paramètres géométriques de taille et position (r,width,height,cx,cy,x,y,rx,ry) doivent impérativement être manipulés en tant qu'attributs !

Si vous souhaitez que tous les cercles aient le même style vous pouvez bien sûr créer une règle CSS relative au sélecteur "circle". Par exemple : circle {fill : green ; stroke-width : 5px ; stroke : red ; }
Si vous souhaitez que certains cercles aient le même style vous pouvez créer une classe spécifique à l'élément circle Par exemple : circle.beau {fill : gold ; stroke-width : 5px ; stroke : steel ; }

Par contre dans une règle de style CSS, il ne pourra y avoir mention des paramètres géométriques de la forme (taille et position) tels with, height, r, x, y, cx, cy, etc.

Dessiner des ellipses

Premier exemple

Vous pouvez observer une belle ellipse remplie de vert clair et bordurée de rouge

Le code SVG correspondant

Deuxième exemple

Une ellipse qui ressemble à un cercle ..

Le code SVG correspondant

La balise SVG étant un élément HTML, on doit la styler avec les propriétés CSS telles background, box-shadow, border, opacity, etc. et non pas avec les propriétés fill, stroke, stroke-width, etc. qui sont réservées aux éléments SVG.

Notez aussi que j'ai utilisé l'élément SVG ellipse et que je dessine en fait un cercle ...
Et oui, un cercle est une forme particulière d'ellipse : rayon horizontal = rayon vertical.

Dessiner segments et polygones

Dessiner des segments

Lignes avec SVG - balise line

Si vous affichez ce canevas via votre smartphone, vous constatez qu'il n'est pas responsive.
En effet les dimensions d'affichage du canevas sont exprimés en pixels (et non pas en pourcentage) et l'attribut viewBox est absent. Voir le code correspondant ci-dessous.

Le code correspondant

Pour tracer un segment il faut employer la balise line avec 4 attributs : abscisse et ordonnée (x1 et y1) du point de départ puis abscisse et ordonnée du point d'arrivée (x2 et y2).
Par défaut une ligne a une épaisseur de 1 pixel(voir première ligne).
L'attribut stroke-linecap avec la valeur round permet d'avoir des extrémités arrondies (ajout d'un demi-cercle à chaque extrémité) et l'attribut stroke-dasharray avec la valeur 5 5 permet d'avoir des lignes pointillées : 5 pixels coloriés puis un intervalle de 5 pixels

Pour l'attribut stroke-linecap les autres valeurs possibles sont butt (valeur par défaut) et square (ajout d'un carré à chaque extrémité de la ligne).

Pour l'attribut stroke-dasharray le nombre d'arguments n'est pas forcément limité à 2 mais doit être pair. Par exemple : stroke-dasharray = '5 5 10 10' qui veut dire : un trait de 5 pixels puis un blanc de 5 suivi d'un trait de 10 et un espace de 10. Ce motif répété sur toute la ligne !

Notez que dans l'exemple le formatage d'un trait est tantôt réalisé sous forme d'attributs et tantôt sous forme de propriétés (mêmes termes dans le cadre de l'attribut style).

Balises polygon et polyline

Pour dessiner des polygones ouverts ou fermés on utilise ces deux balises du format SVG. La balise polygon rajoute automatiquement un segment entre le dernier et le premier point

Dans le premier triangle les angles sont arrondis, "aiguisés" dans le deuxième triangle et tronqués dans la troisième forme.

Le code correspondant

On emploie la balise polygon pour dessiner une ligne brisée fermée (cad un polygone) et la balise polyline pour dessiner une ligne brisée ouverte.

En effet ces deux balises sont très proches ; la seule différence est que la balise polygon ajoute automatiquement un segment entre le dernier et le premier point. Pour ces deux balises il suffit de préciser les coordonnées x et y des différents angles.
Notez bien la syntaxe : x,y x,y x,y ...

Remarquez que le premier et troisième triangles sont remplis de noir car j'ai oublié l'attribut fill = "none". Donc par défaut la forme est remplie de noir.

Notez l'emploi du paramètre stroke-linejoin pour préciser le style des angles.

Il s'agit d'un paramètre de style, il peut être passé en attribut ou en propriété.

Les nouveaux paramètres de mise en forme et les rectangles

Nous venons de voir des paramètres de mise en forme tels stroke-linejoin, stroke-dasharray que nous avons appliqué à des triangles. Peuvent-ils s'appliquer à des rectangles ???
La réponse est OUI comme le montre l'exemple ci-dessous.

Le rectangle en haut et à gauche est borduré de tirets grâce à l'attribut stroke-dasharray.
Les deux formes sont coloriées avec des couleurs "pastel".
On voit très bien ici que la bordure d'une forme est "à cheval" : moitié à l'intérieur et moitié à l'extérieur.

Le code SVG correspondant

Pour mettre en forme ces rectangles j'utilise aussi la classe "joli" définie dans la feuille de style de la page.
Classe qui prévoit des couleurs "pastel" pour le remplissage et le contour : couleurs à demi transparentes.

Quelques points importants

SVG & CSS

Je suppose que vous avez compris que l'on peut appliquer du CSS à des éléments SVG comme en HTML.
Comme pour des éléments HTML, on peut utiliser du CSS en ligne (attribut style) ou créer des règles de style avec les éléments SVG en guise de sélecteur ou définir des classes.
Attention certaines propriétés sont spécifiques aux éléments SVG : fill, stroke, fill-opacity, stroke-opacity, etc.
Attention la balise SVG est un élément HTML (et non pas un élément du format SVG). Donc concrétement si vous voulez remplir un canevas SVG il faut utiliser background et non pas fill, pour bordurer le canevas il faut utiliser border (et non pas stroke).

Dans le cadre de la version 2 de la norme SVG, il est prévu que les paramètres géométriques pourront aussi être passés en propriétés CSS. Ce qui sera très pratique au niveau de l'animation. L'emploi du CSS pourra être systématique !
En SVG 2 on pourra écrire :

Dans le code ci-desssus tous les paramètres (géométriques et de mise en forme) sont passés en propriétés (via l'attribut style).

Ce code est déjà correctement interprété par Chrome (mais uniquement par ce navigateur à ce jour : juillet 2022). Un peu de patience ...

Pour en savoir plus sur la spécification SVG 2

Balises utiles et facultatives

Pour dessiner un segment, une ligne brisée (ouverte ou fermé) on peut utiliser à la place des balises évoquées ci-dessus (line, polyline, polygon) la balise PATH. La balise path est présentée dans le chapitre suivant.