Accueil

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

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 de la balise double 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 dans la page de fichiers SVG existants.

Code SVG écrit dans la page (SVG interne)

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

Insertion de deux fichiers d'images vectorielles au format SVG

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 ; border : 1px solid green ;}

Ainsi les canevas SVG seront centrés horizontalement dans la page.

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

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 :2rectangles.svg & 2rectangles2.svg.
L'insertion dans une page d'images vectorielles au format SVG se réalise avec la balise simple IMG (comme pour des images matricielles).
J'applique à ces images la classe "centre" : largeur d'affichage = 50% de celle de la boite parente et centrage dans celle-ci.

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

Dans le cadre du SVG interne, remarquez que la balise SVG contient l'attribut viewBox et que la valeur de l'attribut width est un pourcentage.
Je reviendrai sur cette syntaxe plus tard. Retenez pour l'instant qu'il s'agit d'une technique pour que le canevas SVG soit 'responsive'.

Code de l'image vectorielle "2rectangles.svg" - extrait

Le rectangle rouge est dessiné après le vert donc il est placé au dessus du rectangle vert.
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 alors simplement "fermer" la balise ouvrante" : un antislash avant la parenthèse fermante.

Les fichiers SVG

A quoi ressemble une fichier SVG (code SVG externe) ?

Code du fichier SVG : "2rectangles2.svg"

Dans le cadre d'un fichier SVG (code SVG externe) les espaces de noms ("name spaces") xmlns et xmlns:xlink de la balise SVG sont obligatoires mais facultatifs dans le cadre d'un SVG interne !
Comme tout fichier XML, une fichier SVG doit comporter un DOCTYPE.

Donc tout document SVG doit commencer par :

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 du repère cartésien 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).

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)

Le code SVG interne d'une page web 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 10px 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 attributs de style (fill, fill-opacity, stroke, stroke-width, stroke-opacity) peuvent être aussi manipulés comme propriétés CSS !
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 :

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 dans la feuille de style des classes applicables à des éléments SVG.
Par exemple : .demi_opaque {fill-opacity : 0.5 ; stroke-opacity : 0.5 ; }
Par contre dans une règle de style CSS, il ne pourra y avoir mention des paramètres géométriques de taille et de position tels with, height, r, x,y,cx,cy, etc.

Dessiner des ellipses

Premier exemple

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

Le code SVG correspondant dans la page

Deuxième exemple

Une ellipse qui ressemble à un cercle ..

Le code SVG correspondant

La balise SVG étant un élément HTML, on doit la styler avec les propriétés CSS 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.

Sachez que grâce à la valeur de width exprimée en %, le canevas SVG devient "responsive" c'est à dire s'affiche proprement sur n'importe quel type d'écran (du mobile à l'ordinateur de bureau). Le viewBox devient alors un attribut obligatoire de la balise SVG.

Je n'en dis pas plus pour l'instant. Il y a un peu plus loin un chapitre entier sur l'attribut viewBox.

Notez aussi que j'ai utilisé la balise ellipse et que je dessine en fait un cercle ...
Et oui, un cercle est une forme particulière d'ellipse : rayon horizontal = rayon vertical.

Dans le cadre des éditeurs WYSIWYG de SVG (Inkscape, Boxy SVG) la forme de base "cercle" n'est pas proposée ; il faut utiliser la forme de base "ellipse".

Dessiner segments et polygones

La balise line

image SVG

Ci-dessus l'image vectorielle "lignes.svg".

Le code du fichier SVG

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é avec des attributs et tantôt avec des propriétés (mêmes termes dans le cadre de l'attribut style).
Je vous conseille d'utiliser plutôt les propriétés dans le cadre de l'attribut style ; la syntaxe est plus simple : économie de guillemets.

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 (extrait)

Je n'indique plus le doctype et les espaces de noms obligatoires puisque c'est toujours le même code.

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

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 du fichier SVG correspondant (extrait)

Remarques

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

Balises utiles et facultatives

Pour dessiner un segment, un polygone ouvert (ou fermé) on peut utiliser à la place des balises évoquées ci-dessus la balise PATH.
Donc en définitive les balises circle, line, polygon, polyline ne sont pas vraiment utiles. On peut se contenter de rect, ellipse, path. La balise path est présentée dans le chapitre suivant.