Dessiner avec SVG

Pourquoi le SVG ?

SVG signifie Scalable Vector Graphics. SVG définit les graphiques vectoriels en format XML.

Ci-dessus une image vectorielle au format SVG et en dessous son équivalent matriciel (format PNG).
En cas de survol la taille de l'image est alors triplée et pourtant vous constatez que la première image (vectorielle) est toujours aussi nette : pas de crénelage (ou effet "dents de scie").
l'image vectorielle peut être étirée à l'infini sans perte de qualité ! (il n'en n'est pas de même de la seconde image ...) Elle sera donc aussi nette sur un grand écran (PC de bureau) que sur un minuscule écran d'un smartphone.

Deuxième avantage : cette image est un fichier qui ne pèse que 3 KO

Troisième avantage : un fichier codé en SVG ressemble à une page Web. En effet comme le HTML, le SVG est un langage XML (des balises avec des attributs). Des formules (basées sur des balises) dessinent les formes.

Quatrième avantage : avec HTML5 Le code SVG peut être écrit directement dans la page Web (à l'intérieur du conteneur SVG).
Cinquième avantage : le SVG (interne ou externe) peut être stylé avec CSS.

Sixième avantage : les formes SVG sont des noeuds du DOM ; il est donc facile de modifier le code pour animer des formes (avec CSS ou JS ou le SMIL).

Il y a cependant un bémol. Si le format SVG est désormais bien implémenté au niveau des navigateurs on ne peut pas en dire autant au niveau des systèmes d'exploitation et de certaines plateformes. Ainsi l'explorateur de fichiers de Windows est incapable d'afficher une miniature d'un fichier SVG !

Ci-dessous l'affichage des images vectorielles par l'explorateur de fichiers de l'OS Windows :

Pour les images vectorielles le programme se contente d'afficher le nom du fichier avec le logo de l'application Paint. Or paradoxalement il est impossible de modifier un fichier SVG avec Paint (voir ci-dessous) ...
De plus pour votre BLOG hébergé par wordpress.com il est impossible d'insérer des images SVG dans une page ou un article ! Et ce pour des raisons de sécurité. En effet un fichier SVG peut contenir aussi du JavaScript ...

Une image vectorielle : un fichier au format SVG

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 matricielles (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, comme HTML, est un 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 en mode graphique.

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 ainsi que le code SVG peut être généré via une librairie JavaScript telle Snap SVG.

Mais dans le même site il y a un second tutoriel qui évoque le SVG dynamique (les animations en SVG !) et qui s'intitule "Animations avec SVG". Grâce à ce deuxième didacticiel vous verrez que l'on peut animer des formes SVG selon différentes techniques (SMIL, JavaScript, CSS). J'évoque aussi l'animation via la librairie déjà citée : Snap SVG. Animer des objets SVG

Encoder en SVG peut s'avérer fastidieux et chronophage. Sachez qu'il existe des éditeurs WYSIWYG de SVG : Inkscape, Illustrator, Boxy SVG, etc.
Donc un troisième tuto porte donc sur le logiciel Inkscape qui a l'avantage d'être gratuit. Dans ce tutoriel je dis aussi quelques mots sur Boxy SVG (extension de Chrome). Logiciels Inkscape et Boxy SVG

Sachez aussi qu'il y a une technologie concurrente à SVG : Canvas.
Dans mon site vous trouverez aussi un tutoriel complet sur cette API JavaScript implémentée sur tous les navigateurs récents. API Canvas