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).
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
- Les pages de ce tutoriel sont réparties en deux parties :
- encodez en SVG pour créer des images vectorielles au format SVG statiques ou dynamiques
- utiliser un framework Snap SVG pour dessiner dans la page
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.
Il existe dans mon site un tuto sur Inkscape & Boxy SVG : Inkscape et Boxy 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).
- J'ai effectué diverses modifications :
- modifier les attributs width, height, viewbox de la balise SVG
- rajouter à la balise G : id ="croix"
- rajouter une feuille de style interne contenant un modèle d'animation "tricolorer" et animer l'objet identifié "croix" avec ce modèle
Le code SVG et CSS de l'image vectorielle est donc le suivant :