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 directement en SVG dans une page web pour dessiner :
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.
Je définis une classe "joli" (classe spécifique à la balise rect).
La balise rect est une des balises du langage SVG.
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 !
L'élément SVG définit un repère cartésien dont les caractéristiques sont établies par l'attribut viewBox
(OU à défaut par les attributs width & height).
Attention l'origine du repère cartésien est situé en haut à gauche !
Le code SVG doit être contenu à l'intérieur de la balise double svg.
Pour dessiner un rectangle il faut utiliser la balise rect avec les attributs x,y, width & height.
Les attributs x & y indiquent les coordonnés du coin supérieur gauche du rectangle.
Comme je ne précise le remplissage (via l'attribut/propriété fill OU via la classe "joli"), les rectangles sont remplis de noir (couleur par défaut).
Concernant le deuxième rectangle, les angles sont arrondis car il y a deux attributs supplémentaires à la balise rect :
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.
Ce qui signifie que l'on définit un repère cartésien de 400 par 200 et que la zone de dessin aura une largeur égale à 50%
de celle de son conteneur.
Les positions et dimensions des objets dessinés sont déterminées via l'attribut viewBox OU à défaut par les attributs width & height si l'attribut viewBox est absent.
"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.
Affichage sur un smartphone en mode portrait n'est pas satisfaisant.
L'attribut viewBox est absent. Donc les caractéristiques du repère cartésien sont définies par les attributs width & height
(exprimés alors de façon implicite en pixels).
La zone de dessin s'affiche ave 400 pixels de large quelque soit l'écran ...
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 ; }
Vous pouvez aussi définir des classes.
L'affichage sur un smartphone n'est pas satisfaisant.
Une ellipse qui ressemble à un cercle.
Affichage satisfaisant sur tous les écrans ; la zone de dessin a toujours une largeur de 50% de celle du conteneur.
La zone de dessin est "responsive" (width ="50%"). L'attribut viewBox est alors obligatoire.
La balise SVG étant un élément HTML on peut la styler avec les propriétés CSS telles background, box-shadow, border, opacity, etc.
Par contre les propriétés fill, stroke, stroke-width, etc. sont réservées aux éléments SVG (rect, circle, ellipse, ...).
Notez aussi que j'ai utilisé la balise ellipse pour représenter un cercle ... Et oui, un cercle est une forme particulière d'ellipse : rayon horizontal = rayon vertical.
La zone de dessin est "responsive" (widht ="60%").
L'attribut viewBox est alors obligatoire.
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.
La zone de dessin est "responsive" (widht ="60%").
L'attribut viewBox est alors obligatoire.
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.
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 deux instructions sont parfaitement équivalentes :
Je suppose que vous avez compris que l'on peut appliquer du CSS à des éléments SVG.
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.
Attention certaines propriétés CSS ne peuvent pas s'appliquer à des objets SVG : background, border, opacity, z-index, etc..
Il faut employer les paramètres préfixés "fill" OU "stroke".
Cependant la balise SVG est un élément HTML donc concrétement pour donner une couleur/image de fond à la zone de dessin 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.
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" (modèle d'animation CSS) 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 : janvier 2024). Il
est donc prématuré de l'utiliser dans une page en ligne.
On ne peut que regretter le manque d'empressement des navigateurs à implémenter la version 2 de SVG.
Pour en savoir plus sur la spécification SVG 2
Si vous utilisez un navigateur autre que Chrome le rectangle ne s'affiche pas.
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.