Tutoriel Inkscape - sommaire

Tutoriel sur le logiciel - chapitre introductif

Présentation de Inkscape

Inkscape n'est pas un langage mais un logiciel !

Attention, Inkscape n'est pas un langage pour le web mais un logiciel de dessin gratuit et francisé.
Inkscape est un éditeur de SVG de type WYSIWYG. Le terme WYSIWYG signifie "What You See, Is What You Get". Ce qui veut que l'utilisateur dessine des formes et en arrière plan le programme génère le code correspondant à ces objets au 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 class & style. Donc un document Inkscape peut contenir une feuille de style en CSS et des règles de style en guise d'attributs.

Pour débuter dans l'utilisation du programme Inkscape vous n'êtes pas obligé de connaitre le SVG. Mais si vous voulez animer certains objets graphiques d'un document Inkscape il est souhaitable de comprendre le code SVG généré par ce logiciel.

Sachez que Inkscape est incapable de générer un document animé.
Pour animer certains objets graphiques vous devrez rajouter du code via un éditeur classique tel NotePad.
Pour produire de l'animation vous pouvez utiliser un composant du SVG : le SMIL. Mais vous pouvez aussi animer via le CSS (et plus précisément sa version 3).
Si vous souhaitez créer un jeu il faut alors recourir à JavaScript.

Vous trouverez dans mon site des tutos sur les langages que je viens de citer :
• Tuto sur le langage SVG
• Didacticiel sur CSS3
• Tutoriel sur JavaScript

Inkscape en quelques mots

Inkscape vous propose une interface avec de nombreuses barres de commandes.
L' utilisateur crée un nouveau document, règle les propriétés de celui-ci.
Puis il dessine des formes (rectangles, cercles, ellipses, polygones, etc).
À chaque fois le logiciel génère du code au format SVG.

L'alternative à Inkscape est Adobe Illustrator. Mais et à la différence de Illustrator de Adobe, Inkscape est entièrement gratuit.
Une image vectorielle créée avec Illustrator peut être ouverte sous Inkscape (si elle a été sauvegardé au format SVG).

Une animation réalisee avec Inkscape

J'exagère un peu. Inkscape n'est pas en mesure de produire directement un dessin vectoriel animé. Mais il n'est pas très compliqué de rajouter à un document Inkscape un modèle d'animation CSS.

Ci-dessous la croix de Lorraine change de couleurs : passe alternativement du rouge au bleu.
Pour les explications concernant la réalisation de cette animation, voir la fin de ce chapitre.

Quelques outils de Inkscape

Les calques

Les fichiers d'extension .svg produits via Inkscape s'appellent des documents. Dans un document Inkscape on peut surperposer plusieurs couches appelées calques.
Chaque calque comprend différentes formes.
L'utilisation des calques simplifie la tache du dessinateur.
Le concept de calque est à la base de certaines animations.
Ci-dessous un document Inkscape ; le dessin complexe a été réalisé en surperposant trois calques.

Ce document Inkscape a été inséré dans la page via la balise IMG.
Pour donner l'illusion d'une toile de maitre, j'ai rajouté à l'image vectorielle une bordure doréé et une ombre portée via le CSS.

Vectorisation d'une image matricielle

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

Le format SVG et les plateformes

Seul bémol, de nombreuses plateformes de blogs et de réseaux sociaux refusent au visiteur d'd'uploader' des fichiers SVG.
C'est le cas de Facebook. Il est impossible de téléverser dans un post 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).

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.

Dernières versions de Inkscape

En cette fin d'année 2024 je viens d'installer la version 1.4 de Inkscape.
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.

Bien créer le nouveau document Inkscape

Il est important de générer une instruction SVG propre.
Capture d'écran du volet "propriétés du document" :

Vous constatez que :
• j'ai défini un canevas de 900px par 600px (j'ai remplacé l'unité par défaut par "px")
• j'ai aussi paramétré "zone de vue" afin de créer l'attribut viewBox (0 0 900 600

Production d'un document Inkscape animé

Revenons à l'animation présentée en début de chapitre : la croix de Lorraine.
J'ai d'abord utilisé Inkscape pour produire un dessin vectoriel (au format SVG) statique.
Dans une seconde étape j'ai ouvert ce document Inkscape avec un éditeur de texte tel NotePad.

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

Utilisation d'un filtre pour ombrer la forme. En effet la propriété CSS box-shadow n'est pas applicable à une forme SVG.

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 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 quelques 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 sueur.

Atention pour produire un code SVG propre via Inkscape (facile à comprendre), il faut "nettoyer le document" avant sauvegarde puis l'enregistrer en "SVG optimisé".

Draw

Draw est le module de dessin de la suite bureautique Libre Office.
Draw est un programme de dessin vectoriel comme Inkscape ou Boxy SVG.
L'interface est très intuitive.
Le problème est que le format par défaut n'est pas SVG mais ODG ... Si vous tentez d'insérer dans une page web un document ODG via les balises IMG ou OBJECT, vous avez un cadre blanc ... La solution est de créer une version avec un format compris par les navigateurs : png, jpeg, gif, svg.

Ci-dessous un document produit avec le logiciel de dessin draw et qui s'affiche proprement dans la page web via la balise IMG : J'ai exporté au format SVG.

La première forme est bordurée et ombrée ; la deuxième est remplie avec un dégradé linéaire ; la troisième avec un dégradé radial.

Pour en savoir plus sur Draw : découverte du programme de dessin Draw