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 :
Vous allez constaté rapidement que le langage SVG ressemble beaucoup au langage HTML.
vous retrouvez des instructions basées sur une balise et suivie d'attributs et parmi ces attributs il existe style
qui permet de mettre en forme la forme directement ou l'attribut class pour un stylage indirect.
...
svg{display : block ; margin : 10px auto; border : 1px solid black}
rect.joli {fill : red; fill-opacity : 0.5 ; stroke-width : 10;
stroke : green; stroke-opacity : 0.5 ;}
...
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 du conteneur (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 la couleur de remplissage des rectangles, ils 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 sera affichée dans la page
web avec une largeur égale à 50% de celle de son conteneur (élément BODY).
Très important : les positions et dimensions des objets SVG dessinés sont déterminées via l'attribut viewBox OU à défaut par les attributs width & height si l'attribut viewBox est absent.
Le code SVG est identique sauf ajout de ... class ="joli" ... donc je style les rectangles via
une classe CSS.
Les connaisseurs de HTML ne sont pas dépaysés.
"Sans méthode la pensée erre et l'action tâtonne."
Rappel : dans un canevas 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 avec 400 pixels de large quelque soit l'écran, donc l'affichage n'est pas "responsive" ...
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 du rond 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 sont passés en attibuts.
Pour le deuxième cercle, les paramètres de style sont passés en propriétés (via l'attribut style)
Par contre les paramètres géométriques (paramètres 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 pour pouvoir choisir entre différentes mises en forme :
circle.style1 {fill : ... ; ...}
circle.style2 {fill : ... ; ...}
N'utilisez entre accolades que les propriétés de mise en forme : fill, stroke, stroke-width, ...
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.
Notez que le canevas SVG a une couleur de fond et est ombré.
La zone de dessin est "responsive" (width ="50%") ; l'attribut viewBox est alors obligatoire.
Attention la balise SVG étant un élément HTML (et non pas SVG) ; 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, line, polygon, polyline,...).
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 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é.
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.
On pourra alors é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" (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.