Accueil
Mes tutoriels sur la programmation

Dessiner avec SVG - sommaire


Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

SVG : Les formes de base

Dessiner des rectangles

Je rappelle qu'avec HTML5 il est désormais possible d'écrire directement le code SVG dans la page web (à l'intérieur du nouveau conteneur SVG).
C'est ce que je fais pour la première image SVG. Par contre pour les deux suivantes, il s'agit de l'insertion de fichiers SVG existants.

Code SVG écrit dans la page

Ci-dessus un premier rectangle simple suivi d'un deuxième avec des angles arrondis.

Insertion de deux fichiers d'images vectorielles

Les deux derniers dessins vectoriels sont identiques à une nuance près. Dans l'avant dernier le rectangle rouge est au dessus du vert alors que dans le dernier c'est l'inverse : vert au dessus du rouge.

Le code correspondant

La feuille de style de la page :

	svg,img{display : block ; margin : 5px auto 5px auto ;	border : 1px solid green ;}

Le code SVG et HTML correspondant aux exemples ci-dessus :

<svg width="50%" height="auto" viewBox ="0 0 400 200"> <rect x="30" y="30" width="100" height="100" /> <rect x="150" y="80" width="200" height="100" rx = '20' ry = '10' /> </svg> ... <img src ="2rectangles.svg" > <img src ="2rectangles2.svg"> ...

Dans cette page il y a trois images vectorielles SVG.
Pour la première image le code SVG est écrit directement dans la page (à l'intérieur du conteneur SVG) alors que pour les deux autres il s'agit d'insertion de fichiers SVG existants.

Concernant le deuxième rectangle de la première image les angles sont arrondis car il y a deux attributs supplémentaires : rx et 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).

En cas d'écriture directe du code SVG dans la page web les attributs xmlns et xmlns:xlink de la balise SVG sont facultatifs !

L'insertion de fichiers SVG dans une page web se réalise comme pour une image matricielle (fichiers PNG & JPG & GIF) avec la balise IMG.
Cependant dans certains cas il faudra utiliser la balise OBJECT mais j'y reviendrai.

Dans le cadre de l'écriture directe du SVG dans la page web et afin que l'image vectorielle soit adaptative exprimez la largeur d'affichage en % (height : auto).
L'attribut viewBox de la balise SVG devient alors obligatoire pour dessiner les formes. La position et taille de chaque forme sera calculée à partir des valeurs du viewBox et non par rapport aux valeurs de width & height).

Code de l'image vectorielle "2rectangles.svg" (code complet)

... <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400" > <rect x="200" y="50" width="50" height="200" fill ="green"/> <rect x="150" y="100" width="300" height="100" fill ="red"/> </svg>

Le rectangle rouge est dessiné après le vert donc il est au dessus du vert !

Code de l'image vectorielle "2rectangles2.svg" (extrait)

... <rect x="150" y="100" width="300" height="100" fill ="red"/> <rect x="200" y="50" width="50" height="200" fill ="green"/> ...

Le rectangle vert est dessiné après le rouge donc il est au dessus du rouge !
L'ordre des balises précise l'ordre d'empilement des formes correspondantes.
Notez dans chaque balise rect l'emploi de l'attribut fill pour remplir la forme (sinon remplissage par défaut de noir).
Remarquez qu'il n'y a pas de balise fermante RECT. Comme il n'y a pas de contenu à l'intérieur de chaque élément RECT on peut simplement "fermer" la balise ouvrante.

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 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 (soit directement dans la page soit dans fichier SVG).

Si vous utilisez une feuille avec des petits carreaux (de 5mm par 5mm) décidez alors d'une échelle. Je vous propose qu'un carreau représente 10px par 10px. Donc un 1/2 cm = 10px et 1cm = 20px. Vous avez donc une échelle 1/20 (1cm pour 20px). C'est l'échelle que j'ai utilisé dans le croquis ci-dessus.
Une zone de dessin SVG de 400 par 200 fait donc dans notre croquis 40 carreaux par 20 carreaux (c'est à dire 20cm par 10cm).
Ensuite vous dessinez les formes.

Par lecture directe du croquis vous obtenez les valeurs x et y de chaque rectangle ainsi que les valeurs des attributs width et height .Il suffit, en effet, de compter le nombre de carreaux et de multiplier par 10 pour obtenir la valeur en pixels.

Dessiner des cercles

cercles avec SVG - balise circle

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).

le code de la page (extraits)

... svg {display : block ; margin : 5px auto 5px auto ; border : 1px solid black ;} </style> ... <body> ... <svg height="200" width="400" > <title>cercles avec SVG - balise circle </title> <circle cx="100" cy="100" r="80" fill="olive" /> <circle cx="150" cy="100" r="80" fill="aqua" fill-opacity="0.5" /> <circle cx="300" cy="100" r="40" stroke="navy" stroke-width="20" fill="none" stroke-opacity="0.5" /> <circle cx="340" cy="100" r="40" style = "stroke : navy ; stroke-width : 10px ; fill : aqua " /> </svg> ...

Le code SVG de la page doit être à l'intérieur du conteneur SVG !

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

Comme nous avons vu dans la page précédente il est inutile de préciser l'unité de mesure si nous raisonnons en pixels !

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 40px dont l'épaisseur du contour est 20px le rayon effectif de cette forme sera 50px ! 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 termes énumérés précédemment (fill, stroke, stroke-width, etc.) peuvent être aussi utilisé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 :
< circle ... fill = 'green' stroke-width = '5px' stroke = 'red' />
ou bien : < circle ... style = "fill : green ; stroke-width : 5px ; stroke : red ; " />

Si vous souhaitez que tous les cercles aient le même style vous pouvez bien sûr créer une règle CSS à l'intérieur de la feuille de style interne à la page. Par exemple : circle {fill : green ; stroke-width : 5px ; stroke : red ; }

Vous pouvez aussi définir dans la feuille de style interne des classes applicables à des objets SVG.
Par exemple : .demi_opaque {fill-opacity : 0.5 ; stroke-opacity : 0.5 ; }
Pour appliquer cette transparence à un objet SVG il n'y a qu'à utiliser l'attribut class avec la valeur "demi_opaque".

Zoomez la page à 500% et vous constatez qu'il n'y a pas l'effet "crénelage" comme avec une image matricielle.

Dessiner des ellipses

Pour dessiner un rectangle il faut utiliser la balise RECT, pour un cercle la balise CIRCLE et pour une ellipse la balise ELLIPSE !

Premier exemple

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

Le code SVG correspondant dans la page

<svg width = "400" height = "200" > <title>ellipse avec SVG : balise ellipse</title> <ellipse cx="200" cy="100" rx="200" ry="100" fill="lightgreen" stroke="red" stroke-width="2"/> </svg>

Deuxième exemple

Le code SVG correspondant

<svg width = "300" height = "300" style ="background : yellow ; box-shadow : 10px 10px 10px gray;"> <ellipse cx="50%" cy="50%" rx="15%" ry="30%" style ="fill : olive; stroke : red; stroke-width : 4 ;"/> </svg>

Code SVG est ici écrit directement dans la page web donc à l'intérieur du conteneur SVG.
La balise SVG est un élément HTML (appartient au DOM HTML) donc on peut styler avec les propriétés background, box-shadow, etc.
On peut positionner et dimensionner une forme SVG avec des paramètres exprimés en pourcentage ; les attributs cx et rx en % de la largeur du canevas (300) et cy et ry en % de la hauteur du canevas (300).
Si la dimension ou la taille est exprimée en pixels l'unité de mesure peut être implicite !

Dans la syntaxe SVG Le style d'un élément peut être exprimé sous forme d'attributs (fill, stroke,etc.) OU des propriétés (via l'attribut style).
Mais les paramètres de position et de dimension doivent toujours être des attributs !

Utiliser la balise ellipse pour dessiner un cercle

On peut considérer (comme le fait le logiciel Inkscape) un cercle comme une forme particulière d'ellipse : rayon horizontal identique au rayon vertical. Cercle dessiné avec la balise ellipse

Ci-dessus un cercle dessiné grâce à la balise ellipse.

Le code SVG correspondant :

<svg height = "400" width = "400" style ="background : yellow ; box-shadow : 10px 10px 10px gray;"> <title>Cercle dessiné avec la balise ellipse</title> <ellipse cx="50%" cy="50%" rx="150" ry="150" style = "background : red; box-shadow : 5px 5px 5px red;" /> </svg>

Il y a un bug dans le code. La forme est remplie de noir sans ombrage alors que dans le code je précise un fond rouge avec ombrage (style = "background : red; box-shadow : 5px 5px 5px red;).
Les propriétés background, box-shadow, border, border-radius, opacity, etc. ne peuvent s'appliquer à des éléments SVG.
Il faut utiliser les propriétés fill, fill-opacity, stroke, stroke-width, stroke-opacity, stroke-linejoin, etc. Quant à l'ombrage d'une forme il faut utiliser un filtre SVG.

Dessiner lignes et polygones

La balise line

image SVG

Ci-dessus l'image vectorielle lignes.svg.

Le code du fichier SVG

... <svg width ="400" height ="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <title>Lignes avec SVG - balise line</title> <line x1="50" y1="50" x2="150" y2="150" stroke="black" /> <line x1="100" y1="50" x2="200" y2="150" style = 'stroke : red ; stroke-width : 5px ; stroke-opacity : 0.5 ;' /> <line x1="150" y1="50" x2="250" y2="150" stroke = 'blue' stroke-width = '10px' stroke-linecap = 'round' /> <line x1="200" y1="50" x2="300" y2="150" style ="stroke:blue ; stroke-width:10px ; stroke-dasharray:5 5;" /> </svg>

Pour tracer une ligne il faut employer la balise line avec 4 attributs : abscisse et ordonnées (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 segment est tantôt réalisé avec des attributs et tantôt avec une règle de style reprenant les mêmes mots (stroke, stroke-with, stroke-opacity, stroke-linecap, etc.) mais cette fois comme propriétés de style (valeurs de l'attribut style).

Balises polygon et polyline

image SVG

Ci-dessus l'image vectorielle polygones.svg.

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 du fichier SVG

... <svg width ="400" height ="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <desc>La balise polygon rajoute automatiquement un segment entre le dernier et le premier point </desc> <polygon points ="50,50 50,100 150,50" stroke = 'navy' stroke-linejoin = 'round' stroke-width ="10" /> <polygon points ="100,100 100,200 250,100" stroke = 'olive' stroke-linejoin = 'miter' fill ="none" stroke-width ="10"/> <polyline points ="200,200 200,280 300,200" stroke = 'purple' stroke-linejoin = 'bevel' stroke-width ="10" /> </svg>

On emploie ici la balise polygon pour dessiner des formes fermées (ici deux triangles) et la balise polyline pour dessiner une forme 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 angles de la forme.
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 de l'attribut stroke-linejoin pour préciser le style des angles.

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.
Peuvent-ils s'appliquer à des rectangles ???

Le premier rectangle est borduré de tirets, le second a des bordures arrondies. Les deux rectangles sont à demi opaques : le jaune de l'arrière plan se mélange avec la couleur de remplissage rouge des rectangles.
On voit très bien ici que la bordure d'une forme SVG est "à cheval" : moitié à l'intérieur et moitié à l'extérieur.

Le code de l'image vectorielle correspondante

... <svg style ="background : yellow;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox ="0 0 600 400"> <style> rect {fill : red; fill-opacity : 0.5 ; stroke-width : 10; stroke : green; stroke-opacity : 0.5 ;} </style> <rect x="300" y="200" width="300" height="100" stroke-linejoin ="round" /> <rect x="200" y="50" width="50" height="200" stroke-dasharray = "5 5" /> </svg>

Remarques

Notez qu'un fichier SVG peut contenir une feuille de style interne (exactement comme une page HTML).
On y définit une règle de style pour les éléments de type RECT.

Balises utiles ?

Pour dessiner un segment, un polygone ouvert ou fermé on peut utiliser à la place des balises évoquées ci-dessus la balise PATH.
La balise PATH est présentée dans la page suivante.