Tutoriel Inkscape & Boxy SVG - sommaire

Inkscape & Boxy SVG : éditeurs WYSIWYG d'images au format SVG

Inkscape & Boxy SVG sont des éditeurs de SVG de type WYSIWYG.
Le terme WYSIWYG signifie "What You See, Is What You Get". Cette expression anglaise désigne une interface qui permet de générer du code à partir de ce qu'écrit ou dessine l'utilisateur.
Le format SVG est le format préconisé par le W3C (organisme de standardisation des langages du web) pour les images vectorielles.

Le logiciel Inkscape

Inkscape est d'abord une interface WYSIWYG d'images vectorielles au format SVG.
Vous dessinez des formes et en arrière plan, le logiciel produit un fichier au format SVG.
Vous produisez donc des images vectorielles c'est à dire des images qui conservent toute leur qualité même en les agrandissant fortement. Ce qui n'est pas le cas d'images matricielles surtout si elles sont "légères" (peu de pixels).
Les formes dessinées via Inkscape, peuvent être simples (rectangles, ellipses, cercles) ou complexes.

Dans un document Inkscape on peut surperposer plusieurs calques.
Chaque forme peut être remplie d'une couleur unie plus ou moins opaque ou d'un dégradé linéaire ou radial voire un motif.
Ci-dessous un document Inkscape ; le dessin complexe a été réalisé en surperposant trois calques.

Pour insérer ce document Inkscape dans la page, l'instruction HTML est :
<img src ="chaumiere.svg" class ="centre" style ="border : 20px solid gold ; box-shadow : 10px 10px 10px gray;">

Dans un document Inkscape je peux incorporer une image matricielle et superposer du texte, des formes.
Ci-dessous document Inkscape basé sur la photo d'un poisson de mer nommé "Loup de l'Atlantique". Puis j'ai rajouté des formes et du texte.

Une îmage matricielle peut être liée à un document Inkscape pour être vectorisée.
Ci-dessous une belle "aquarelle" réalisée sous Inkscape à partir d'une photo : vectorisation d'une image matricielle.

Sachez que l'on peut aussi utiliser Inkscape pour créer les fameux fichiers "spritesheet" (grille d'images), des QR codes, etc.
Inkscape est également très utilisé en matière de cartographie ; une carte vectorielle peut être agrandie sans perte de qualité.

Seul bémol, de nombreuses plateformes de blogs et de réseaux sociaux refusent "d'uploader" des 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).

Un code optimisé

Bonne nouvelle, Inkscape propose désormais un outil d'optimisation intégré. Avant il fallait utiliser une application en ligne telle "SVG optimizer".

Lorsque vous voulez enregistrer le document, la boite de dialogue vous demande :
• de donner un nom au fichier
• de préciser le type de fichier

Ci-dessous la boite de dialogue de la commande "enregistrer" de Inkscape.
Vous constatez que les documents Inkscape apparaissent avec le logo de Chrome (mon navigateur par défaut) et non sous la forme de miniatures car je n'avais pas encore installé l'extension SVG Viewer Extension for Windows Explorer.

Pour le type, séléctionnez alors dans la liste déroulante "SVG optimisé". (5ième item de la liste).

Une boite de dialogue avec différents onglets apparait alors. Cette boite vous permet de :
• fixer le nombre de chiffres significatifs pour les coordonnées
• supprimer le "baratin" (déclaration XML, metadonnées, commentaires, etc.)
• supprimer les ID inutiles
• styler les formes via des attributs
• générer ou pas l'attribut viewBox de la balise SVG
• etc.

Ci-dessous la boite de dialogue "sortie SVG optimisé" :

Attention la boite comprend deux autres onglets.
Dans ce tutoriel il y a un chapitre sur l'optimation d'un document Inkscape ; voir sommaire du tuto.

Exemple

Le rendu d'un document Inkscape optimisé.
Il s'agit d'un rectangle converti en chemin ; puis deux noeuds déplacés afin d'obtenir un trapèze. Et enfin la forme remplie d'un dégradé linéaire basique.

Le code optimisé corespondant : <svg width="600" height="600" version="1.1" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="linearGradient3298" x1="53" x2="546" y1="299" y2="299" gradientUnits="userSpaceOnUse"> <stop stop-color="#0e8adf" offset="0"/> <stop stop-color="#0e8adf" stop-opacity="0" offset="1"/> </linearGradient> </defs> <path d="m116 175h344l87 249h-493z" fill="url(#linearGradient3298)" stroke-linejoin="round" stroke-width="2"/> </svg>

Le code SVG généré devient tellement clair qu'il est facile de mettre "les mains dans le cambouis". Par exemple pour modifier le dégradé linéaire OU rajouter du code (du CSS) pour animer l'objet ; il faudra alors identifier le "path" à animer : rajouter l'attribut ID.
Vous pouvez aussi simplifier la valeur de l'attribut de ID dans la commande linearGradient. N'oubliez pas de modifier alors la valeur de l'attribut fill de la commande path.

Production d'un document Inkscape animé

Dans ce tuto il y a plusieurs pages consacrées à cette thématique. Mais je veux dès maintenant vous montrer qu'en combinant le logiciel Inkscape et un éditeur tel Notepad on peut facilement et rapidement créer des images vectorielles animées.
Ci-dessous un fichier SVG inséré dans la page :

Vous constatez que la croix de Lorraine change de couleur. Il s'agit donc d'une animation SVG.

Utilisation d'Inkscape

J'ai obtenu le code suivant en utilisant Inkscape et en sauvegardant selon le type "SVG optimisé". <svg width="400" height="400" version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="filter5705" x="-.029" y="-.023" width="1.1" height="1.1" color-interpolation-filters="sRGB"> <feFlood flood-color="rgb(0,0,0)" flood-opacity=".5" result="flood"/> <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/> <feGaussianBlur in="composite1" result="blur" stdDeviation="3"/> <feOffset dx="10" dy="10" result="offset"/> <feComposite in="SourceGraphic" in2="offset" result="composite2"/> </filter> </defs> <g transform="translate(0 -652)"> <g fill="#0e8adf" filter="url(#filter5705)"> <g transform="translate(3.5 -19)"> <rect x="162" y="723" width="86" height="310"/> <rect x="109" y="771" width="192" height="64"/> </g> <rect x="82" y="875" width="249" height="71"/> </g> </g> </svg>

On distingue deux parties dans le code :
• la description du filtre
• le dessin de la croix

Dans le format SVG, un ombrage est un filtre ; on ne peut pas appliquer aux éléments SVG la propriété CSS box-shadow.

Pour générer ce code j'ai dessiné la croix de Lorraine (3 rectangles qui se croisent) remplis de bleu puis j'ai groupé les trois formes et j'ai appliqué un ombrage par le biais d'un filtre prédéfini : commande : filtre/ombre et lueurs / ombre portée ...
J'obtiens donc une belle croix de lorraine ombrée mais statique.

Utilisation d'un éditeur tel NotePad pour animer le document

J'ai ensuite ouvert le document Inkscape avec Notepad.
J'ai inséré une feuille de style (entre la balise SVG début et la balise DEFS) dont le code est : <style> @keyframes tricolorer { 0%{fill : blue ; } 50%{fill : white ; } 100% {fill : red ; } } .couleur{animation : tricolorer 6s 0s infinite linear alternate ; } </style>

Il s'agit donc d'un modèle d'animation nommé "tricolorer". Voir le tutoriel CSS dans le même site.
Cette animation s'applique aux formes affectées de la classe "couleur".
Puis j'ai ajouté aux trois balises RECT, l'attribut class ="couleur"
et c'est tout !!!
Donnc en dix minutes j'ai réalisé une belle animation SVG via CSS en utilisant Inkscape puis NotePad.
Encoder soi-même tout le code correspondant à l'animation aurait demandé beaucoup plus de temps et de "sueurs".

Atention pour produire un code SVG propre via Inkscape, il faut "nettoyer le document" avant sauvegarde puis l'enregistrer en "SVG optimisé". Sinon le code généré sera "merdique" (excusez la trivialité de mon propos) et vous aurez du mal pour vous y retrouver.

Dernière version de Inkscape

La version la plus récente du logiciel a le numéro 1.2.1 et date de juillet 2022.

Parmi les innovations : le mode d'affichage du document. Ainsi on peut très bien n'afficher que les contours des formes et chemins (sans les couleurs). 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.

Attention toutes les pages de ce tuto n'ont pas encore actualisées dans le cadre de la dernière version.
Je vous prie de patienter un peu.

Boxy SVG

Boxy SVG est un éditeur SVG WYSIWYG en ligne proposé par Google Chrome. Pour obtenir l'application (extension de Chrome) allez sur le site "Chrome web store".
Inconvénient : interface en anglais. Aucune documentation en français pour l'instant.
Avantage : le code SVG généré est à la base très succinct, il est optimisé d'office.
Maintenant que Inkscape génère nativement un document optimisé, Boxy SVG perd selon moi, beaucoup de son intérêt.