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
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Ci-dessous une image vectorielle au format SVG. Format préconisé par le W3C (organisme de normalisation des langages pour le web) pour les images vectorielles.
Zoomez la page, l'image garde toute sa qualité !
Ce qui n'aurait pas été le cas d'une image matricielle (formats gif, png ou jpg).
Ce tuto porte sur le format SVG. SVG signifie Scalable Vector Graphics.
SVG est le format préconisé par le W3C pour les images vectorielles.
Lorsque vous utilisez les logiciels de dessins tels Inkscape ou BoxySVG, vous créez des images au format SVG.
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 HTML5 il est possible d'encoder en SVG directement dans la page ; il suffit que ce code soit contenu dans la balise double 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).
Dans la pratique les fichiers SVG sont créés à partir de logiciels tels Inkscape, Illustrator ou Boxy SVG.
Paradoxalement le format SVG est encore peu utilisé dans le cadre de la programmation web.
En fait, le format était plutôt mal supporté par les navigateurs, mais ce n'est plus le cas. Tous les navigateurs récents savent interpréter le code
SVG.
Autre restriction à l'emploi des images SVG : de nombreuses plateformes telles Facebook, WordPress.com refusent de télécharger des fichiers SVG.
Et ceci pour des raisons de sécurité, car un fichier SVG peut contenir du JavaScript malveillant ...
Il existe de nombreuses banques de fichiers SVG dont certaines sont gratuites.
Citons entre autres : SVG clipart, Devient art, SGV studio, 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
Le code est tout simplement :
C'est donc aussi simple qu'avec une image matricielle.
Des logiciels de dessins produisent des images vectorielles au format SVG à partir d'une interface. On dessine et en arrière plan du code est généré.
Citons entre autres : Illustrator, Inkscape, Boxy SVG.
Inkscape est gratuit, Boxy SVG est une application en ligne proposée par Google.
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.
Il y a dans ce site un tutoriel sur Inkscape & Boxy SVG. Tuto sur Inkscape
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(with,height,r,x,rx,ry,x,y,cx,cy etc.)
peuvent être passés en propriétés CSS et donc peuvent être manipulés dans le cadre d'un modèle d'animation ("keyframes").
L'animation d'objets SVG sera fortement simplifiée : plus de prise de tête pour savoir si tel paramètre doit être passé en attribut ou en propriété.
L'apprentissage du SVG sera allégé : plus besoin d'apprendre le SMIL (module d'animation).
Dans le cadre de la spécification SVG 2, il sera possible d'appliquer à des éléments SVG la propriété z-index. Donc il sera
facile de changer l'ordre d'empilement d'objets.
Animations SVG 2 via CSS
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 fichier SVG peut contenir non seulement du code SVG mais aussi une feuille de style en CSS et 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é.
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 Boxy SVG 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.
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 une
feuille de style interne au fichier.
Le code du fichier "croix_lorraine_animee.svg" après modifications via un éditeur de textes :
Si vous connaissez le CSS version 3, vous avez noté un modèle d'animation ; modèle appliqué à l'élement identifié "croix".
Survolez rapidement les parties relatives aux balises line, polygon, polyline car elles peuvent être remplacées par path.
Pour ce qui est de l'animation, je pense que l'avenir est l'emploi du CSS plutôt que le SMIL ou le JavaScript ; vous pouvez donc lire en diagonale
les chapitres portant sur les balises du SMIL : animate, animateMotion, animateTransform & set.
Pour créer un canevas SVG dans une page, vous pouvez écrire un script en Snap SVG (bibliothèque de méthodes JS pour le format SVG).
Plusieurs pages sont consacrées à ce Framework SVG.