Traduction
Tutoriel Inkscape - sommaire
Tutoriel Inkscape - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Inkscape est 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".
Donc un utilisateur de Inkscape dessine des formes et le logiciel génère un code en SVG.
Le format SVG est le format préconisé par le W3C (organisme de standardisation des langages du web) concernant
les images vectorielles.
Pour apprécier pleinement Inkscape il est préférable d'avoir des notions de SVG.
Vous trouverez dans mon site un tuto sur ce standard web mal connu :
dessins vectoriels avec SVG
À la différence de Illustrator de Adobe, Inkscape est entièrement gratuit.
Une image vectorielle crée avec Illustrator peut être ouverte sous Inkscape.
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.
Du fait qu'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 le format bitmap est toujours préférable.
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.
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.
Je rappelle que Inkscape 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.
Les formes dessinées via Inkscape, peuvent être simples (rectangles, ellipses, cercles) ou complexes.
Les fichiers d'extension .svg produits via Inkscape s'appellent des documents.
Dans un document Inkscape on peut surperposer plusieurs calques.
Chaque calque comprend différentes formes.
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.
Dans un document Inkscape je peux incorporer une image matricielle et superposer du texte, des formes.
Ci-dessous un document Inkscape basé sur une photo (image bitmap) incorporé. Puis j'ai
rajouté des formes et du texte au document.
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.
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).
Bonne nouvelle, Inkscape propose désormais un outil d'optimisation intégré. Avant il fallait utiliser une application en ligne telle "SVG optimizer".
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).
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.
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 :
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.
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.
Il est important de générer une instruction SVG propre.
Capture d'écran du volet "propriétés du document" :
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. Le code SVG est lourd.
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
Revenons à l'animation présentée en début de chapitre.
J'ai d'abord utilisé Inkscape pour produire un dessin vectoriel (au format SVG) statique puis j'ai utilisé un éditeur
de textes pour améliorer le code.
Je vous explique en détail ma démarche ci-dessous.
J'ai obtenu le code suivant en utilisant Inkscape et en sauvegardant selon le type "SVG optimisé".
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.
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 :
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é".