Accueil

Inkscape et Boxy SVG : éditeurs WYSIWYG de SVG

Ci-dessous une belle "aquarelle" réalisée sous Inkscape à partir d'une photo : vectorisation d'une image matricielle. image SVG avec Inkscape

Le logiciel Inkscape

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 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.
Dès que vous utilisez l'outil "texte" de l'interface Inkscape vous risquez de générer du SVG incompatible avec les navigateurs. Préférez alors l'application Boxy SVG de Google.

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. En particulier vous pouvez utiliser un outil en ligne : SVG Optimiser.

Boxy 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 en général léger ; donc pas besoin de devoir l'optimiser.

Signalons aussi qu'il existe aussi des frameworks SVG. Le plus célèbre est SNAP SVG qui lui génère du SVG interne (directement dans la page web) et qui de surcroit peut être animé : Le framework Snap SVG

Sommaire de ce tuto