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 constater que le langage SVG ressemble beaucoup au langage HTML. Vous retrouvez des instructions construites à partir d'une balise suivie d'attributs. Toutes les balises autorisent les attributs style et class. Ce qui signifie que vous pouvez styler les formes SVG via le CSS.
Pour info la feuille de style interne de cette page :
...
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 ;}
...
Je définis deux règles de style relatives à l'élement SVG et une autre pour les éléments RECT affectés de la classe "joli".
La balise SVG est un nouvel élément HTML introduit par la norme HTML5.
Cet élément crée une zone de dessin dans la page web.
Par contre RECT est un élément du langage SVG.
Dessiner des rectangles
Comment se repérer dans une zone de dessin 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 !
Dans une page web 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ées 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).
Notez que l'élément SVG est double (balises début et fin) et que l'élément RECT est simple (pas de balise fin).
En cas de balise simple il faut la "fermer proprement": faire précéder le chevron > de / .
Attention l'élément rect ou deviendra une balise double si elle inclut une autre élément du langage SVG.
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 (50%).
Ce qui signifie que l'on définit un repère cartésien de 400 par 200 qui sera affiché dans la page
web avec une largeur égale à 50% de celle de son conteneur (élément BODY).
Quand à la hauteur de la zone de dessin elle sera toujours égale à la moitié de la largeur d'affichage. Le ratio
largeur/hauteur est défini par le viewBox.
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 "joli".
Les connaisseurs de HTML ne sont pas dépaysés.
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.
La balise SVG est obligatoirement double (une balise début et une balise fin) et délimite le code SVG dans un document.
Les autres balises sont doubles si elles incluent d'autres balises sinon elles sont simples.
Dans le cas d'une balise simple il "fermer" la balise : faire précéder > de / .
Ces éléments sont des balises simples ou doubles.
Un élément du langage SVG est obligatoirement une balise double s'il contient un autre élément.
Cette situation est fréquente en cas d'animation ; vous avez alors la syntaxe suivante :
L'élément ANIMATE qui est inclus dans CIRCLE permet d'animer le cercle.
Animer avec le SMIL
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'affichera toujours avec 400 pixels de large et 200 de haut quelque soit l'écran,
donc l'affichage n'est pas ici "responsive" ...
Pour dessiner un cercle il faut utiliser l'élément CIRCLE :
Nous avons à cette fin utiliser les attributs de style (fill, stroke, fill-opacity, etc.) sauf
pour le quatrième cercle où nous avons utilisé l'attribut style avec des paires de propriété : valeur.
Vous notez donc que les mêmes termes (fill, stroke, fill-opacity, stroke-opacity, ...) sont tantôt des attributs
et tantôt des propriétés de style ...
En SVG version 1, les paramètres de style peuvent être passés en attributs de balise OU en propriétés CSS.
Par contre les paramètres géométriques (r,width,height,cx,cy,x,y,rx,ry)
doivent impérativement être manipulés en tant qu'attributs de balise.
La norme SVG 2 devrait être plus permissive ... voir fin du chapitre.
Pour les attributs fill-opacity, stroke-opacity la valeur va de 1 (opacité totale) à 0 (transparence totale).
Attention si vous dessinez un cercle de rayon 40 pixels dont l'épaisseur du contour est 10 pixels le rayon total 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.
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" dans la feuille de style interne de la page :
...
// styler les éléments HTML
body {...
h1,h2 {...
img {...
svg {...
// styler les éléments SVG
circle {fill : green ; stroke-width : 5px ; stroke : red ; }
rect {fill : ...
line {...}
...
Vous pouvez aussi définir des classes génériques ou spécifiques à un type d'élément.
...
circle.style1 {fill : ... ; stroke : ...}
circle.style2 {fill : ... ; stroke : ...}
.ukraine {fill : yellow ; stroke : blue ; ...}
...
Vous devrez alors écrire dans le conteneur SVG :
Attention les propriétés background, border, box-shadow, opacity, etc.) ne s'appliquent qu'à des éléments HTML mais jamais à des éléments SVG. Je rappelle que la balise SVG est un élément HTML (et non pas un élément du langage SVG).
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.
La balise SVG étant un élément HTML, on peut la styler avec les propriétés CSS
telles que 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.
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 entre autres que les paramètres géométriques (de taille et de position) puissent ê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 non seulement les paramètres de mise en forme mais aussi les paramètres géométriques sont passés
sous forme de propriétés.
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 : mars 2025). Il
est donc prématuré de l'utiliser dans une page publiée sur la "toile".
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 dessiné en SVG2 ne s'affiche pas.