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) 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 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.

Autre avantage de ce logiciel : il est gratuit (licence GNU GPL).

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. Donc tout ce que vous avez appris grâce au tuto "Animer objets SVG" vous sera très utile.

Attention si on ne prend pas certains précautions le code SVG généré peut devenir lourd. Il y a des astuces pour "alléger et optimiser le code".

Un document Inkscape peut être ouvert en modification avec un n'importe quel éditeur de textes tel Notepad.
Plus le code sera optimisé 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 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 des applications 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

L'éditeur de SVG proposé par Google était gratuit. Il est désormais payant (moins de 8 €). Pour acquérir l'application (extension de Chrome) allez sur le site "Chrome web store".

A la différence de Inkscape, le code SVG généré est très léger (surtout si vous règlez les "préférences") ; donc pas besoin de devoir l'optimiser.
Malgré une interface toujours en anglais la prise en main est relativement facile. Mais beaucoup d'outils disponibles sur Inkscape ne le sont pas sur Boxy SVG : importation d'image matricielle, vectorisation, calque, clonage, filtres, etc.
Aussi il est encore trop tôt pour juger de l'avenir de ce projet ...

Vous trouverez dans ce tuto (sur Inkscape) deux articles sur Boxy SVG.

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.