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 le langage SVG car les extraits de code sont nombreux.
Le langage SVG est un langage XML qui permet de produire des dessins vectoriels statiques voire animés.
J'espère vous démontrer au travers de ce tuto, qu'une bonne connaissance de la syntaxe SVG est utile, lorsque les éditeurs WYSIWYG de SVG sont à la peine et qu'il faut passer à l'encodage manuel.
Je tente aussi de vous montrer que l'utilisation maladroite des éditeurs graphiques de SVG peut générer un code lourd voire aberrant ou encore inapproprié pour une animation ultérieure.

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.
La version 4 de Boxy SVG permet de générer via son interface l'animation de certains objets.

Premier chapitre sur Boxy SVG

Le format SVG

SVG est le format préconisé par le W3C (organisme de standardisation des langages du web) concernant les images vectorielles.
SVG est un langage de balisage (comme le HTML) : des éléments avec des attributs dont les attributs.
Comme avec HTML, en SVG natif vous ne disposez ni de variables ni de structures de contrôles (tests, boucles) ...

La syntaxe SVG

Est-il utile d'avoir des connaissances dans le langage SVG ?

Les éditeurs WYSIWYG de SVG sont des outils très utiles mais qui ont des limites :
• tout d'abord le code SVG produit un éditeur de SVG tel Inkscape est externe (dans un fichier d'extension .svg) or on veut parfois que le code SVG soit directement dans le document HTML (SVG interne).
• un éditeur WYSIWYG de SVG ne peut produire qu'un dessin vectoriel statique *
• un éditeur WYSIWYG de SVG peut générer du code aberrant
• une mauvaise utilisation de ces interfaces graphiques (par méconnaissance du SVG) peut générer un code lourd ou inaproprié pour une animation ultérieure

* La version 4.0 de Boxy SVG introduit le nouveau panneau "Animations".
Vous pouvez donc utiliser Boxy pour générer une animation écrite en SMIL.

Le langage SVG est un langage XML (comme le HTML). Il suffit de connaitre les balises et leurs attributs ...

Tutoriel sur le langage SVG

Ci-dessous quelques exemples où les programmes Inkscape et Boxy sont à la peine ...

Quand l'éditeur WYSIWYG génère du code aberrant

Dans un document 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 matricielle et le document Inkscape sont dans le même répertoire !

Extrait du code du fichier "image_liee.svg" :

Le chemin (valeur de l'attribut xlink:href de l'élément IMAGE) est noté en absolu alors que l'image et le document SVG sont dans le même dossier ...

Correctifs à apporter

Vous devez en manuel modifier la valeur de l'attribut xlink:href pour chaque élément IMAGE.
Le code modifié : ... <image x="0" y="0" width="206" height="219" xlink:href="jolie_fille.jpg"/> <image x="0" y="280" width="206" height="219" style="filter:url(#d)" xlink:href="jolie_fille.jpg"/> <image x="213" y="2.39" width="206" height="219" style="filter:url(#b)" xlink:href="jolie_fille.jpg"/> <image x="427" y="1.31" width="206" height="219" style="filter:url(#e)" xlink:href="jolie_fille.jpg"/> <image x="216" y="277" width="206" height="219" style="filter:url(#c)" xlink:href="jolie_fille.jpg"/> <image x="436" y="277" width="206" height="219" style="filter:url(#a)" xlink:href="jolie_fille.jpg"/> ...

J'ai remplacé pour chaque balise IMAGE le chemin absolu par le chemin en relatif qui ici se résume au nom de l'image.

Le rendu

L'original de l'image en haut à gauche puis la même image avec différents filtres.

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 comprendre le code SVG) de rajouter dans un document Inkscape un modèle d'animation CSS ou un script en JS ou encore des instructions en SMIL (composante animation du SVG).

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

Quand l'éditeur WYSIWYG génère un code SVG trop lourd

Si vous demandez à Boxy SVG d'importer N fois la même photo (image matricielle) le logiciel va la "rastériser" N fois. Donc le document SVG sera très lourd !
Il faut demander au logiciel d'incorporer l'image 1 fois puis en manuel il faut transformer l'image "rastérisée" en modèle et la cloner N fois.

Créer des documents SVG avec plusieurs calques

Un des principes de l'animation de documents SVG est de jouer sur les calques.
Donc en vue de l'animation ultérieure du document pensez à créer plusieurs calques.

Le format SVG et les plateformes et les 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).

Améliorations de Inkscape

Les dernières versions du logiciel ont apporté des innovations notables.
Attention la liste des nouveautés n'est pas exhaustive ...

Un outil d'optimisation du code intégré dans Inkscape

Avant il fallait utiliser une application en ligne telle "SVG optimizer". Désormais l'outil d'optimisation est intégré.
Un code SVG optimisé est plus léger et surtout plus facile à comprendre.

Les modes d'affichage

Dans les versions récentes on peut très bien n'afficher que les contours des formes et chemins (sans les couleurs): mode "contour"
Ce mode d'affichage est très pratique lorsque différents objets se superposent et peuvent donc être masqués dans le cadre du mode "normal" d'affichage.
Ci-dessous document affiché en mode "normal" :

Ce même document affiché en mode "contour" (ou "outline") :

On apprend ainsi qu'il existe un pentagone masqué par le rectangle rouge.

Une galerie de symboles impressionnante

Un "symbole" est un modèle d'objet clonable.

Des extensions intéressantes

Ainsi l'extension JessyInkf permet de créer des présentations web (qui tournent sur un navigateur).