Dessiner avec SVG - sommaire

Dessins vectoriels avec SVG

Ci-dessous une image vectorielle au format SVG.
SVG est le format soutenu par le W3C (organisme de normalisation des langages pour le web) concernant les images vectorielles.
Zoomez la page, l'image garde toute sa qualité ; pas d'effet "escalier" ou crénelage.

Objet de ce tutoriel

Ce tuto porte sur le format SVG; ce sigle signifie Scalable Vector Graphics.
Sachez qu'il existe d'autres formats d'images vectorielles : ai, eps, ...
Lorsque vous utilisez les logiciels de dessins tels Inkscape ou Adobe Illustrator voir Draw de LibreOffice, vous créez des images vectorielles!
A la différence de l'image matricielle ("raster graphic" en anglais), l'image vectorielle ("vector graphic" en anglais) est une représentation conceptuelle constituée de primitives géométriques comme les points, les lignes, les courbes et les polygones qui forment des entités décrites par des formules mathématiques. Par exemple, pour représenter un rectangle, on a besoin de préciser l'emplacement de son angle haut et gauche, la largeur et la hauteur du rectangle, l'épaisseur et couleur de bordure, etc.

Au lieu de mémoriser une mosaïque de pixels (comme c'est le cas d'une image matricielle), un fichier d'image vectorielle stocke la succession d'opérations conduisant au tracé.
Du fait qu'une image vectorielle est décrite par des entités mathématiques, il est possible d'agrandir ou de réduire sa taille sans aucune perte de qualité. Tandis qu'une image matricielle faite d'un nombre fini de pixels ne pourra subir d'agrandissement qu'au prix d'une dégradation sensible appelée crénelage ("aliasing" en anglais).
Il est donc recommandé, dans le cadre du "responsive design" que les logos, bannières, schémas d'un site soient des images vectorielles. Par contre pour les photos un format matriciel (png, jpg, gif) est préférable.

Pendant longtemps les images vectorielles au format SVG étaient des fichiers (extension .svg) comprenant surtout du code SVG (mais aussi éventuellement du code CSS et JavaScript).
Depuis HTML 5, il est possible d'encoder en SVG directement dans la page web.
Je parlerai donc dans ce tuto tantôt de SVG "interne (inline)" (code SVG dans la page web) et tantôt de "SVG externe" (un fichier d'extension .svg).

Le SVG "inline" peut être généré par un framework SVG tel Snap SVG.

Les fichiers SVG, quant à eux, sont le plus souvent produits avec des logiciels tels Inkscape, Adobe Illustrator (voire Draw de la suite LibreOffice).
Il suffit ensuite d'insérer ces documents SVG dans la page web ; dans la plupart des cas via la balise IMG (comme pour un dessin matriciel).

Les éditeurs WYSIWIG de SVG

Des logiciels de dessins produisent des images vectorielles au format SVG à partir d'une interface. On dessine et en arrière plan du code SVG est généré.
Citons entre autres : Illustrator, Inkscape, Boxy SVG. Illustrator est le plus performant mais il est payant ...
Inkscape est gratuit, Boxy SVG est une application en ligne proposée par Google.
Il existe aussi dans la suite LibreOffice un module de dessin vectoriel : Draw (possibilité d'exporter au format SVG).

L'inconvénient de ces logiciels est qu'ils génèrent du code SVG pour des dessins statiques. Il faut donc "mettre les mains dans le code" pour animer certains objets dessinés. d'où l'intérêt d'avoir de bonne connaissances en SVG pour s'y retrouver dans ce code.
Autre inconvénient : ces logiciels générent des fichiers SVG qu'il faut ensuite intégrer dans les pages web. Or l'insertion de documents SVG dans un document HTML peut dans certains être délicate ...

Il y a dans ce site un tutoriel sur Inkscape & Draw : Tuto sur Inkscape

Les frameworks SVG

Il existe aussi des frameworks écrits en JS pour simplifier la programmation en SVG.
La librairie la plus connue est Snap SVG. Elle est particulièrement intéressante pour créer rapidement des dégradés, filtres, motifs (syntaxe un peu verbeuse en SVG standard).
Autre avantage : génération de SVG "inline" c'est à dire de SVG dans la page web à la différence des éditeurs de SVG.

Personnellement je n'utilise plus le SVG standard pour définir les filtres, dégradés, motifs, masques, découpes. J'utilise toujours un script Snap SVG.

Exemple de script Snap SVG

Il faut bien sûr charger au préalable la librairie (un fichier d'extension .js) ... var s = Snap("#zone1") ; // définition de 4 dégradés linéaires var lineairedd = s.gradient("l(0, 0, 1, 1) black-red-pink"); // axe : diagonale descendante var lineairev = s.gradient("l(0, 0, 0, 1) black-orange-yellow"); // axe vertical var lineaireh = s.gradient("l(0, 0, 1, 0) black:50-navy-blue-skyblue"); // axe horizontal var lineairedm = s.gradient("l(0, 1, 1, 0) black:10-olive-green-lime"); // axe : diagonale montante // utilisation des dégradés s.rect(0, 0, 200,300).attr({fill: lineairedd}); s.rect(300,0,200,300).attr({fill: lineairev}); s.rect(0,300,200,300).attr({fill: lineaireh}); s.rect(300,300,200,300).attr({fill: lineairedm}); ...

Ci-dessous le code SVG généré par le script

Donc le script modifie le DOM ; ajoute des éléments SVG.

Framework Snap SVG

Les banques d'images SVG

Il existe de nombreuses banques de fichiers SVG dont certaines sont gratuites.
Citons entre autres : SVG clipart, Devient art, SGV studio, hello SVG, etc.

Ci-dessous une image vectorielle récupérée sur l'un des sites cités :

Pour insérer cette image vectorielle (ce fichier d'extension .svg) dans une page web, il suffit d'utiliser la balise IMG (comme pour une image matricielle). Le code est tout simplement :
< img src ="ordinateur.svg" class ="centre" alt ="dessin vectoriel" >

Je ne me suis pas contenté de "piquer" ce document SVG sur la "toile".
Je l'ai ouvert avec Inkscape, j'ai ajouté une zone de texte et j'ai sauvegardé au format optimisé (il ne pèse plus que 300 KO au lieu de 500 KO).

SVG version 2

La version 2 de SVG commence seulement à être implémentée par le navigateur Google Chrome.
L'animation via CSS (plutôt qu'avec le SMIL ou JavaScript) s'imposera alors. En effet, parmi les nouveautés de cette version, tous les paramètres géométriques (de taille et de position tels with ,height ,r, rx ,ry ,x ,y ,cx ,cy , etc.) peuvent être passés en propriétés CSS et donc être manipulés dans le cadre d'un "keyframes" CSS.
L'animation d'objets SVG sera fortement simplifiée. L'apprentissage du SVG sera allégé ; plus besoin d'apprendre le SMIL (module d'animation) ; donc 5 chapitres de ce tuto seront obsolètes ; il suffira de maitriser CSS 3 et en particulier les "keyframes" et le raccourci "animation".
Animations SVG 2 via CSS

Un document SVG, c'est quoi ?

Faites un clic droit sur l'une des deux images SVG de cette page. Comme pour une image bitmap vous pouvez l'enregistrer sur votre ordinateur puisque le menu contextuel vous propose la commande "Enregistrez l'image sous".
Faites le avec la première image ! Vous récupérez sur votre machine un fichier nommé rue.svg.
Essayez de l'ouvrir avec le logiciel PAINT ; vous avez un message d'erreur :" Paint ne peut pas lire ce fichier. Format non pris en charge" ; En effet Paint ne peut ouvrir que les images "pixellisées" ou matricielles : gif,png, jpg).
Essayez maintenant d'ouvrir "rue.svg" avec un éditeur de textes tel NOTEPAD. Vous pouvez l'ouvrir et vous voyez le code SVG.
Vous constatez que le SVG ressemble beaucoup à du HTML : langage de balisage.

Essayez ensuite d'ouvrir le fichier avec Inkscape (un éditeur SVG de type WYSIWIG) ; l'image apparait et vous pouvez la modifier via l'interface WYSIWYG de ce logiciel.

Un document SVG peut contenir non seulement du code SVG mais aussi une feuille de style en CSS voire des scripts.
Je peux vous assurer que mes fichiers SVG ne comprennent pas de JavaScript malveillant. Vous pouvez donc les télécharger en toute tranquillité.

SVG : pourquoi apprendre ce langage ?

Certains esprits brillants mais paresseux peuvent faire remarquer qu'il n'est peut-être pas utile d'apprendre la syntaxe SVG alors que des logiciels de dessin vectoriel génèrent du code à ce format.
Certes, mais ni Inkscape, ni Adobe ne sont capables de générer du code correspondant à des animations.
Par contre, si vous avez de bonnes notions en SVG, vous pourrez compléter le code d'un document Inkscape afin d'animer certains éléments de ce fichier comme je l'ai fait ci-dessous avec la "croix de Lorraine".

Certains font remarquer que lorsque l'on veut dessiner dans une page web, on peut aussi utiliser l'API Canvas.
Canvas et SVG sont en effet deux outils qui permettent depuis HTML5; de dessiner directement dans la page web.
Cependant SVG présente un gros avantage par rapport à Canvas ; les objets dessinés avec SVG sont des noeuds du DOM (ce qui n'est pas le cas des formes dessinées avec Canvas).
Il y a dans mon site un tuto sur l'API Canvas : API Canvas

Démonstration par l'exemple

Observez l'image vectorielle animée ci-dessous.
La croix de lorraine change de couleur : bleu puis blanc puis rouge et le cycle reprend dans l'ordre inverse.

Pour obtenir cette animation j'ai d'abord utilisé le logiciel de dessin Inkscape pour créer un fichier SVG.
Puis j'ai ouvert ce document Inkscape avec un éditeur de textes (NotePad par exemple) et j'ai effectué diverses modifications et en particulier j'ai rajouté une feuille de style interne (incluant un modèle d'animation).
J'ai aussi modifié le code de l'instruction SVG début afin de rendre cette image "responsive" (largeur d'affichage de l'image affichée en % et non plus en pixels).

Installez une extension de windows

Si vous utilisez un PC sous windows je vous conseille d'installer une extension appelée SVG Viewer Extension for Windows Explorer. Sinon il n'est pas possible de prévisualiser les images vectorielles.
Ci-dessous aperçu d'un dossier lorsque l'extension n'est pas installée :

Les fichiers SVG sont visualisés par le logo de Chrome (mon navigateur par défaut).

Ci-dessous aperçu d'un répertoire lorsque l'extension est installée :

Les fichiers SVG apparaissent sous forme de miniatures (à condition d'avoir demandé l'affichage sous forme d'icônes).