Le site de Patrick Darcheville

Logiel Inkscape

Logiciel Inkscape

Tutoriel Inkscape

Créer des images vectorielles avec Inkscape

Initiation au logiciel Inkscape

Dessiner avec Inkscape

Générer du code SVG via Inkscape

Générer du SVG avec Boxy SVG




image SVG avec Inkscape

Vous rêvez de réaliser de beaux croquis numériques mais vous avez la main tremblante.
Sachez qu'avec Inkscape il est facile de réaliser un croquis à partir d'une photo.

Ici je me suis contenté d'incorporer dans un nouveau document Inkscape une photo puis j'ai vectorisé cette photo.
J'ai ensuite optimisé le code avec une application en ligne (SVG editor) : la taille du fichier est passé de 250 KO à 65 KO !
Puis j'ai ouvert le fichier correspondant à l'image vectorielle avec un éditeur de textes et j'ai modifié les valeurs de certains attributs de la balise SVG (width, height, viewBox ) pour rendre l'image "responsive".
Je ne détaille pas toutes ces procédures dans cette introduction. Je vous renvoye aux chapitres correspondants dans le tuto.

Dans le tuto "dessiner avec SVG" vous aviez découvert le format SVG pour réaliser des images vectorielles et vous avez compris (du moins je l'espère) l'avantage des images vectorielles par rapport aux images matricielles.
Dans tous les thèmes évoqués par le tuto précité le code était saisi avec un éditeur de textes tel NotePad. Vous comprenez que si vous voulez réaliser un dessin complexe avec une multitude d'objets la saisie du code devient vite une opération fastidieuse.

Le logiciel Inkscape

Inkscape va vous faciliter grandement la tâche. Inkscape est un logiciel libre de dessin vectoriel. Ce qui veut dire que vous dessinez et coloriez les formes (rectangles, cercles, ellipses, polygones, etc.) et en arrière plan le logiciel génère un fichier au format SVG.

Inkscape est donc un outil précieux pour créer des images vectorielles au format SVG (donc des images pour le web) mais il a des limites. Ainsi il est impossible pour l'instant de générer du SVG dynamique (dessins animés) via ce logiciel en d'autres termes on ne peut pas générer du SMIL (balise d'animation du format SVG) ou du JavaScript voire du CSS dédié à l'animation.

Autre inconvénient le code SVG généré par Inkscape est parfois lourd. Heureusement il y a un site en ligne (SVG editor) qui vous permet d'obtenir une version optimisée du code SVG. Par ailleurs je vous conseille d'enregistrer les documents Inkscape en "SVG simple" et non pas en "SVG Inkscape" ; il sera déjà débarassé de beaucoup de "blabla" inutile.
On peut cependant regretter que le logiciel Inkscape ne propose pas un module d'optimisation ...

Un document Inkscape peut être ouvert en modification avec un n'importe quel éditeur de textes tel Notepad.
Plus le code sera concis et plus il vous sera aisé pour vous de vous y retrouver dans le code et de le modifier pour animer certains objets dessinés (insertion dans le code de SMIL ou de JavaScript ou de CSS).

Les éditeurs de code SVG dotés d'une interface graphique sont nombreux.
Le plus performent est certainement Illustrator de Adobe mais il est cher ... très cher. Difficile d'amortir la dépense pour un particulier.
Il existe aussi beaucoup de services en lignes gratuits dont Boxy SVG proposé par Google.

Inkscape quant à lui est un logiciel et doit être installé sur votre ordinateur. Mais son installation ne pose aucune problème particulier. Le plus simple est de se rendre sur le site officiel pour télécharger la dernière version : inkscape-fr.org

Boxy SVG

La dernière version de Boxy SVG de Google s'est enrichi de nouveaux outils.
Ainsi dans la barre d'outils on trouve désormais les formes suivantes : étoile, contour, roue dentée, etc.
Pour dessiner des polygones irréguliers on peut utiliser les outils "polygon tool" et "polyline tool".
Comme avec Inkscape on peut transformer une forme régulière en chemin puis transformer des segments en courbes de Bézier.
Mais à la différence de Inkscape, le code SVG généré est très léger ; pas besoin de l'optimiser.
Malgré une interface toujours en anglais la prise en main est rapide.

Aussi vous trouverez dans ce tuto une première page pour présenter sur cette application mais il va y avoir d'autres !

Les différents chapitres de ce tuto

Dans chaque page des extraits de code figurent dans des encadrés roses. Sur les mobiles, seules les premières lignes apparaissent. Il suffit de toucher l'encart pour le déplier.