Traduction
Dessiner avec SVG - sommaire
Dessiner avec SVG - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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 !
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 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)
"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.
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.
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.
Vous pouvez observer une belle ellipse remplie de vert clair et bordurée de rouge
Une ellipse qui ressemble à un cercle ..
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.
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.
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).
Pour dessiner des polygones ouverts ou fermés on utilise ces deux balises du format SVG.
Dans le premier triangle les angles sont arrondis, "aiguisés" dans le deuxième triangle et tronqués dans la troisième forme.
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é.
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 via la classe joli.
Définition de cette classe : rect.joli {fill : red; fill-opacity : 0.5 ; stroke-width : 10; stroke : green; stroke-opacity : 0.5 ;}
Les couleurs de remplissage et de bordure sont donc douces, disons "pastel".
Concernant la syntaxe, ces paramètres peuvent être écrits sous forme d'attributs ou sous forme de propriétés CSS.
Ci-dessous les deux instructions sont parfaitement équivalentes :
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 balises SVG en
guise de sélecteur ou définir des classes (spécifiques ou génériques).
Attention certaines propriétés CSS ne peuvent s'appliquer à des objets SVG : background, border, opacity, z-index, etc..
Il faut employer les paramètres préfixés "fill" et "stroke".
Cependant la balise SVG est un élément HTML (et non pas un élément SVG). Donc concrétement pour donner une couleur de fond au canevas SVG, utilisez
"background" et pour le contour utilisez "border" voire "box-shadow" pour un ombrage.
Nous avons vu que les paramètres de mise en forme peuvent être écrits sous forme d'attributs de balise OU sous forme de propriétés.
Par contre les paramètres géométriques (positions et dimensions de la forme dans le canevas : x, y, cx, cy, r, rx, ry, width, height, ...) sont obligatoirement passés en attributs.
Dans le cadre de la version 2 de la norme SVG, il est prévu que les paramètres géométriques (de taille et de position) pourront aussi être passés en
propriétés CSS. Ce qui sera très pratique au niveau de l'animation.
En SVG 2 on pourra donc écrire :
Dans le code ci-desssus tous les paramètres (géométriques et de style) sont passés en propriétés (via l'attribut style).
Donc via un "keyframes" on pourra animer non seulement le style de l'objet mais aussi sa position et sa taille.
Le code ci-dessus est déjà correctement interprété par Chrome (mais uniquement par ce navigateur à ce jour : juillet 2022). Il est donc prématuré de l'utiliser dans une page en ligne.
Pour en savoir plus sur la spécification SVG 2
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.