Le site de Patrick Darcheville

Inkscape pour créer des images vectorielles au format SVG

image SVG avec Inkscape

Ci-dessus un beau pastel réalisé sous Inkscape à partir d'une photo : vectorisation d'une image JPG.

Le logiciel Inkscape

Dans le tutoriel "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 exemples traités 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 avec un éditeur tel NotePad devient vite une opération fastidieuse et chronophage ...

Inkscape va vous faciliter grandement la tâche. Inkscape est un logiciel de dessin vectoriel doté d'une interface graphique. Ce qui veut dire que vous dessinez, 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 et non des moindres : il est gratuit (licence GNU GPL) !

Inkscape est donc un outil précieux mais il a des limites. Ainsi il est impossible de générer du SVG dynamique (dessins animés) via ce logiciel. Pour passer d'une image vectorielle statique à une image animée il faut compléter le code "en manuel" c'est à dire via un éditeur de textes. Donc tout ce que vous avez appris grâce au tuto "Animations avec SVG" vous sera très utile pour associer à certains objets graphiques du SMIL ou du JavaScript voire du CSS.

Attention si on ne prend pas certains précautions le code SVG d'un document Inkscape peut devenir lourd. Il y a des astuces pour "optimiser" le code (et donc réduire le poids du fichier). En particulier vous pouvez utiliser un outil en ligne : SVG Editor. On peut cependant regretter qu'un outil d'optimisation ne soit pas intégré directemenent au logiciel.

Les autres éditeurs SVG

Les éditeurs WYSIWYG ("What You See Is What You Get") de SVG sont nombreux. Le plus performant 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 en ligne dont Boxy SVG proposé par Google. Boxy SVG est 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 léger ; 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 ...

Vous trouverez dans ce tutoriel (sur Inkscape) deux articles sur Boxy SVG.
L'inconvénient de logiciel tels Inkscape ou Boxy SVG est que le code SVG généré est externe (production d'un fichier SVG).
Charge à vous d'intégrer ensuite les images SVG dans les pages (via HTML ou CSS).
Signalons qu'avec le framework JavaScript Snap SVG le script est interne et de plus il peut consister en des animations ... La librairie Snap SVG

Les différents chapitres de ce tutoriel