Pourquoi les images vectorielles ?
SVG est l'un des formats vectoriels les plus utilisés. C'est le format préconisé par le W3C.
SVG signifie Scalable Vector Graphics.
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.
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 de "SVG interne" (code SVG dans la page web, à l'intérieur du conteneur SVG) et
de code "SVG externe" (code SVG dans un fichier d'extension .svg).
Un fichier SVG
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.
Trois tutoriels sur le format SVG
Il y a énormément de choses à dire sur le format SVG.
Dans ce tuto je ne traite que du SVG correspondant au dessin statique. Je montre aussi que le code SVG interne peut être généré via un framework SVG
tel Snap SVG.
Mais dans le même site il y a un second tutoriel qui évoque le SVG dynamique (les animations) : Animer des objets SVG
Sachez qu'il existe des éditeurs WYSIWYG de SVG : Inkscape, Illustrator, Boxy SVG, etc.
Personnellement j'utilise Inkscape & Boxy SVG
Les éditeurs WYSIWYG de SVG ont des limites : aucun n'est capable de générer du SVG correspondant à des animations.
Les frameworks SVG ont aussi leurs limites : ils ne sont pas adaptés pour générer le SVG correspondant à des chemins complexes.
Donc connaissance de la syntaxe SVG reste absolument nécessaire pour éventuellement modifier le code généré par certains logiciels.