Sommaire partiellement masqué - faites défiler !
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é ; pas d'effet "escalier" ou crénelage.
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 BoxySVG, vous créez des images au format SVG donc 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 ; 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 documents SVG sont créés à partir de logiciels tels Inkscape, Adobe 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 documents SVG.
Et ceci pour des raisons de sécurité, car un fichier SVG peut contenir du JavaScript malveillant ...
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.
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.
Il y a dans ce site un tutoriel sur Inkscape & Boxy SVG : Tuto sur Inkscape
Il existe aussi des librairies JavaScript (Framework) pour simplifier la programmation en SVG.
La librairie la plus connue et utilisée est Snap SVG. Elle est particulièrement intéressante pour créer facilement des
dégradés et filtres.
Le principe est simple : vous écrivez dans la page web un script basé sur les méthodes de haut niveau Snap SVG.
Le Framework génère du code SVG qui est exécuté par le navigateur.
Exemple de script Snap SVG (sans la balise SCRIPT début et fin) :
Le code SVG généré par le framework :
Utilisez les outils de développement du navigateur pour visualiser ce code.
Vous trouverez dans ce tuto quelques pages sur ce framework SVG ; voir sommaire du tuto.
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 (comme pour une image matricielle).
Le code est tout simplement :
< img src ="ordinateur.svg" class ="centre" alt ="image au format SVG" >
Je ne me suis pas contenté de "piquer" ce document SVG sur la page.
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).
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 CSS ("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 de balise
ou en propriété CSS.
L'apprentissage du SVG sera allégé : plus besoin d'apprendre le SMIL (module d'animation). Il suffira de maitriser CSS3.
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 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é.
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 comme je l'ai fait ci-dessous avec la "croix de Lorraine".
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.
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).
Le code du fichier "croix_lorraine_animee.svg" après modifications via un éditeur de textes se présente comme suit :
Notez la complexité de l'instruction SVG début. Celle-ci comprend différents attributs appelés "espaces de nom" ("namespaces"). Je rappelle que cette instruction avait été générée par Inkscape (puis j'ai modifié deux attributs).
Si vous connaissez le CSS version 3, vous avez noté un modèle d'animation, modèle appliqué au groupe de formes identifié "croix".
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).