Accueil

Dessiner avec SVG - sommaire

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

Le format SVG

Ci-dessous une image vectorielle SVG. Zoomez la page ; l'image reste parfaitement nette. Ce qui n'aurait pas été le cas d'une image matricielle (formats gif, png, jpg). image vectorielle SVG

Objet de ce tutoriel

Ce tuto porte sur le format SVG. SVG signifie Scalable Vector Graphics.
SVG est l'un des formats vectoriels les plus utilisés. C'est le format préconisé par le W3C.
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 savoir l'emplacement de son angle haut et gauche, sa largeur et sa hauteur.
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, schémas d'un site soient des images vectorielles. Par contre pour les photos un format matriciel (png, jpg). 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 HTML5 il est possible de dessiner directement dans une page en utilisant SVG ; il suffit que du code SVG soit inclus dans l'élément SVG !
Je parlerai donc dans ce tuto tantôt de "SVG interne" (code SVG dans la page web) et tantôt de "SVG externe" (un fichier d'extension .svg).

Contenu de ce tuto

Dans la première partie vous réaliserez d'abord des dessins statiques. Puis vous animerez des éléments SVG soit via le SMIL ou le JavaScript voire le CSS.
Le SMIL (Synchronized Multimedia Integration Language) est une composante du langage SVG pour l'animation.

Le framework SVG consiste à produire des scripts pour générer dans la page web des images SVG statiques voire animées.

Un fichier SVG, c'est quoi ?

SVG est désormais le format d'image vectorielle le plus répandu et par ailleurs le format soutenu par le W3C (organisme de standardisation de la programmation web).

Faites un clic droit sur l'image vectorielle 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 ! 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" dites 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 XML.
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.

SVG : pourquoi apprendre ce langage ?

Les limites des logiciels de dessin vectoriels

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 tels Inkscape, Illustrator, etc. génèrent du code à ce format.
Certes mais ni Inkscape, ni Illustrator ne sont capables de générer du code correspondant à une image vectorielle animée ...

Donc si vous avez de bonnes notions en SVG vous serez capable (avec un éditeur de textes) de compléter le code généré par Inkscape afin d'animer certaines formes OU de vous former rapidement au développement avec le framework Snap SVG.

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é Inkscape en créant un document Inkscape de 400 pixels par 400 et j'ai sauvegardé ce fichier au format "svg simple".

Ensuite j'ai optimisé le code SVG du document Inkscape en utilisant l'application en ligne SVG EDITOR. J'avais pris la précaution de grouper toutes les formes constitutives de la croix de Lorraine en un seul objet.

Enfin j'ai ouvert la version optimisée avec un éditeur de textes (NotePad).

Le code SVG et CSS de l'image vectorielle est donc le suivant :

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="auto" viewBox="0 0 400 400" version="1.1"> <style> @keyframes tricolorer { 0%{fill : blue ; } 25%{fill : white ; } 50% {fill : red ; } 75% {fill : white ; } 100% {fill : blue ; } } #croix{animation : tricolorer 15s 0s infinite linear ; } </style> <g transform="translate(0,-652.36216)" id ="croix"> <path d="m234.1 693.3 19.8 14.7 1 323.1-20.8-15.7z" fill="#666"/> <rect y="692.4" x="162" height="319.6" width="70"/> <rect y="752.4" x="90" height="60" width="220" /> <rect y="872.4" x="70" height="60" width="260" /> <path d="m311 751.4 20 10.8 0 61-20-11.8zM331 870.4l21 13.8 0.4 61-21.4-9.9z .... </g> </svg>