Accueil

Inkscape et Boxy SVG : éditeurs WYSIWYG de SVG

Ce qui signifie que vous dessinez des formes, des chemins, incorporez des images matricielles pour éventuellement les vectoriser.
Et en arrière plan, le logiciel produit une image vectorielle au format SVG.

Le logiciel Inkscape

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

Pour récupérer ce document Inkscape faites un clic droit puis sélectionnez "enregistrez l'image sous"

Il est très simple d'importer une image matricielle (png, gif, jpg) dans un document Inkscape.
Cette image bitmap importée, vous pouvez la vectoriser comme ci-dessous (pour lui donner un côté artistique) ou tout simplement l'utiliser en fond (comme ci-dessous) et rajouter d'autres objets au-dessus.

Pour récupérer ce document Inkscape faites un clic droit puis sélectionnez "enregistrez l'image sous"

Vous pouvez biens sûr, importer une photo, vectoriser celle-ci puis rajouter des objets comme ci-dessous où j'ai rajouté un rectangle de censure.

Pour récupérer ce document Inkscape faites un clic droit puis sélectionnez "enregistrez l'image sous"

A chaque fois il ne m'a fallu que quelques minutes pour réaliser ces documents Inkscape.
Plus compliqué : la production de véritables animations SVG. Plus compliqué, car Inkscape n'est pas capable de générer directement le code (CSS ou JavaScript ou SMIL) correspondant à l'animation de certains objets. Il faut donc démarrer le travail avec Inkscape puis, grâce à une bonne connaissance du langage SVG (mais aussi CSS ou JavaScript), rajouter une feuille de style interne ou un script (ou les deux) dans le document.
Ci-dessous une animation SVG basique. Le décor a été produit sous Inkscape puis j'ai basculé sous NotePad pour lier au document deux "sprites" (des gifs animés).

Sachez que l'on peut aussi utiliser Inkscape pour créer les fameux fichiers "spritesheet" (grille d'images), des QR codes, etc.
Inkscape est également très utilisé en matière de cartographie ; une carte vectorielle peut être agrandie sans perte de qualité.
Le code SVG généré par Inkscape est parfois un peu lourd mais il peut être optimisé avec des applications en ligne dont SVG Optimiser.
On peut regretter que Inkscape ne propose pas vraiment d'outil d'optimisation du code.

Boxy SVG

Boxy SVG est un éditeur SVG en ligne proposé par Google. Pour obtenir l'application (extension de Chrome) allez sur le site "Chrome web store".
Inconvénient : interface en anglais ; avantage : le code SVG généré est à la base très succinct.

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 créer des animations. Le framework Snap SVG
Mais vous n'êtes plus en mode WYSIWYG ... il faut saisir un script !

Sommaire de ce tuto

Dans les différentes pages vous pourrez récupérer les documents Inkscape en faisant un clic droit sur l'image correspondante sauf lorsque le document est inséré dans la page via la balise OBJECT (ce qui est exceptionnel).