Tutoriel Inkscape & Boxy - sommaire

Tutoriel sur Inkscape & Boxy SVG - chapitre introductif

Ce tutoriel porte désormais non seulement sur Inkscape mais aussi sur Boxy SVG.
N'oubliez jamais que ces deux programmes ont pour objet de générer des documents encodés en SVG via une interface graphique.
La lecture attentive de ce tuto vous permettra de découvrir par la même occasion le langage SVG.
Le langage SVG (Scalable Vector Graphics) est un langage XML qui permet de produire des dessins vectoriels donc comme le HTML, il s'agit d'un langage de balisage avec des balises ; chaque balise ayant des attributs.
Le SVG est le format préconisé par le W3C (World Wide Web Consortium) pour la réalisation d'images vectorielles.
Comme pour le format gif, les images SVG peuvent être animées.
Mon tuto sur le langage SVG

Inkscape & Boxy SVG

Attention, Inkscape & Boxy SVG ne sont pas des langages du Web mais des logiciels qui permettent via un éditeur graphique de générer des fichiers encodés en SVG : des documents SVG.

À propos de Inkscape

Inkscape est un éditeur WYSIWYG de SVG. Le terme WYSIWYG signifie "What You See, Is What You Get". Ce qui veut dire que l'utilisateur dessine des formes et en arrière plan le programme génère le code correspondant au format SVG. Le format SVG est un format d'images vectorielles.
Une image vectorielle peut être agrandie à l'infini sans perte de qualité.
Avec le temps Inkscape évolue : toujours plus d'outils mais en contrepartie une interface plus complexe.

Premier chapitre sur Inkscape

À propos de Boxy SVG

Boxy SVG est aussi un éditeur WYSIWYG de SVG.
Il s'agit en fait d'une application web ; d'une extension de Chrome. Il n'y a rien à installer sur votre PC.
L'interface de Boxy est très dépouillée par rapport à celle d'Inkscape.
Si vous n'avez jamais utilisé d'éditeur WYSIWYG de SVG, il est peut-être préférable pour vous de démarrer avec Boxy SVG.
Boxy SVG est certes plus simple d'utilisation que Inkscape mais il offre moins de fonctionnalités. Cependant la version 4 de Boxy SVG permet de générer via son interface l'animation de certains objets ; ce qui n'est pas encore possible via Inkscape.

Premier chapitre sur Boxy SVG

Images vectorielles et images matricielles ?

Je viens de citer plusieurs fois l'expression "images vectorielles". Mais c'est quoi une image vectorielle ?

Les fichiers d'extension .gif, .png & .jpg sont des images matricelles alors que les fichiers d'extension .ai et .svg sont 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 d'entités via 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 dans le canevas mais aussi d'indiquer la largeur et la hauteur du rectangle, l'épaisseur et couleur de bordure, etc.

Au lieu de mémoriser une mosaïque de pixels, un fichier d'image vectorielle stocke un script qui permet de reconstituer l'image. Avec Inkscape ce programme est encodé en SVG.
Comme 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) surtout si le nombre de pixels est limité.

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 bitmap (jpeg en général) est toujours préférable.

Les limites des éditeurs WYSIWIG de SVG

Les éditeurs WYSIWYG de SVG sont des outils très utiles mais qui ont des limites :
• tout d'abord le code SVG produit par un programme tel Inkscape est "externe" (dans un document SVG) or on veut souvent que le code SVG soit inclus directement dans la page web (SVG interne)
• un éditeur WYSIWYG de SVG peut générer du code aberrant
• Inkscape ne peut générer que du code SVG correspondant à une image statique

Transformer du SVG externe en SVG interne

Depuis HTML version 5 du code SVG peut être contenu dans une page web à condition que ce code soit délimité dans le conteneur SVG.

Vous pouvez faire appel à Inkscape (ou Boxy SVG) pour produire un document d'extension .svg.
Ensuite il vous suffit d'ouvrir ce document SVG avec un éditeur de texte tel NotePad puis de couper-coller le code vers la page web cible.

Paradoxallement le code SVG dans une page web est un peu plus simple que son équivalent dans une document SVG.
Donc après copiage il faudra procéder à quelques allégements de code.

Quand Inkscape génère du code aberrant

Dans un document Inkscape, j'ai importé avec liaison une image matricielle puis j'ai dupliqué 5 fois cette image.
Ensuite j'ai appliqué à chaque copie un filtre.
L'image source et le document Inkscape sont dans le même répertoire !

Extrait du code du document "image_liee.svg"

Le chemin vers l'image liée (valeur de l'attribut href de l'élément IMAGE) est noté en absolu alors que l'image et le document SVG sont dans le même dossier ...
Donc si vous transférez chez votre hébergeur le document SVG (ainsi que l'image liée) le rendu du document sera une page blanche ... Le chemin n'a aucun sens chez l'hébergeur.

Correctifs à apporter

Avant téléversement chez l'hébergeur, il faut modifier la valeur de l'attribut href pour chaque élément IMAGE.
Le code modifié : ... <image x="0" y="0" width="206" height="219" href="jolie_fille.jpg"/> <image x="0" y="280" width="206" height="219" style="filter:url(#d)" href="jolie_fille.jpg"/> <image x="213" y="2.39" width="206" height="219" style="filter:url(#b)" href="jolie_fille.jpg"/> <image x="427" y="1.31" width="206" height="219" style="filter:url(#e)" href="jolie_fille.jpg"/> <image x="216" y="277" width="206" height="219" style="filter:url(#c)" href="jolie_fille.jpg"/> <image x="436" y="277" width="206" height="219" style="filter:url(#a)" href="jolie_fille.jpg"/> ...

J'ai remplacé pour chaque élément IMAGE le chemin absolu par le chemin en relatif qui ici se résume au nom de l'image matricielle liée.
Ce chemin sera aussi valide chez l'hébergeur (à condition de téléverser document SVG et image dans le même dossier).

Le rendu du document Inkscape dans un Iframe

Créer un dessin vectoriel animé

Inkscape n'est pas en mesure de produire directement un dessin vectoriel avec des objets animés.
Mais il n'est pas très compliqué (à condition de connaitre un peu le code SVG) de rajouter dans un document Inkscape un modèle d'animation CSS ("keyframes) OU un script JS OU des instructions en SMIL (composante animation du SVG).

Ci-dessous la croix de Lorraine change de couleurs : passe alternatvement du rouge au bleu en passant par le blanc.
Animer les documents SVG

Le format SVG et les plateformes et le systèmes d'exploitation

Seul bémol, de nombreuses plateformes de blogs et de réseaux sociaux refusent au visiteur de téléverser des fichiers SVG.
C'est le cas de Facebook. Il est impossible d'ajouter dans un article une image SVG et ce pour des raisons de sécurité. En effet un document SVG peut contenir du JS malveillant.
Les cybercriminels exploitent de plus en plus les fichiers SVG

Autre inconvénient, le gestionnaire de fichiers de Windows est incapable de prévisualiser les fichiers SVG. Je vous conseille donc d'installer une extension de Windows : SVG Viewer Extension for Windows Explorer.
Ci-dessous aperçu d'un dossier (contenant des fichiers SVG) lorsque cette extension est installée :

Les images vectorielles apparaissent sous forme de miniatures (à condition bien sûr de demander un affichage sous forme d'icônes).