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.
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.
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" (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 (voire Draw de la suite LibreOffice).
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 aussi 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.
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.
Il y a dans ce site un tutoriel sur Inkscape & Draw : Tuto sur Inkscape
Il existe aussi des frameworks écrits en JS 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 proposées par Snap SVG.
Le Framework génère du code SVG qui est exécuté par le navigateur.
Exemple de script Snap SVG :
Le code SVG généré par le framework :
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) tels 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 "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).
Il suffira de maitriser CSS3 ("keyframes" et raccourci "animation").
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 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 utiliser l'API Canvas ; donc utiliser une librairie JavaScript.
Mon opinion vis à vis de Canvas a évolué favorablement. Les innovation sont notables. Sachez qu'avec le constructeur Path2D il est possible d'utiliser
le codage du chemin au format SVG ...
Quant aux filtres, on peut utiliser désormais la syntaxe CSS3 !
Comme l'API SVG, l'API Canvas est implémentée par les navigateurs récents.
Il y a dans mon site un tuto sur l'API Canvas : API Canvas
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).