Accueil

Dessiner avec 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). image vectorielle SVG

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 au format SVG dans une page. Il suffit que le code SVG soit inclus dans la balise 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 du 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 : Animer des objets SVG

Sachez qu'il existe des éditeurs WYSIWYG de SVG : Inkscape, Illustrator, Boxy SVG, etc.
Personnellement j'utilise Inkscape & Boxy SVG. Logiciel Inkscape

Les éditeurs de SVG ont des limites ; aucun n'est capable de générer du SVG interne (à la page) ou des images SVG dynamiques.
La connaissance de la syntaxe SVG reste donc nécessaire pour éventuellement compléter le code généré.

Sommaire de ce tuto