Logiciels Inkscape et Boxy SVG

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

    Quelques outils proposés par Inkscape :

  • il est possible de créer des formes simples (rectangles, cercles) mais aussi complexes (polygones, étoiles)
  • une forme de base peut être transformée en chemin
  • on peut subdiviser le dessin en couches qu’on appelle calques et ça c’est très très pratique …
  • on peut aussi cloner une forme ; ainsi si vous modifiez l’original les clones sont modifiés eux aussi
  • on peut appliquer aux objets des effets : floutage, ombrage, dégradés, etc
  • on peut incorporer une image matricielle (une photo par exemple)
  • une image matricielle peut être vectorisée pour obtenir croquis comme l’image ci-dessus
  • un dessin produit avec Inkscape peut être enregistré dans différents formats : le SVG bien sûr mais vous pouvez aussi produire un fichier PDF ou encore créer un équivalent matriciel : une image PNG
  • Inkscape c’est aussi des extensions très pratiques : générer un QR code, convertir en Braille, etc.
  • vous pouvez utiliser Inkscape pour créer très rapidement un fichier « spritesheet » (ou feuille de sprites)

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 certaines 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. 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é.

Inkscape et Boxy SVG