Accueil

Inkscape et Boxy SVG : éditeurs WYSIWYG de SVG

Le logiciel Inkscape

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

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 et rajouter d'autres objets au-dessus. Ci-dessous je me suis contenté de rajouter un masque à une photo du Loup de l'Atlantique.

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.

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 via Inkscape. Plus complexe car Inkscape n'est pas capable de générer directement le code (CSS ou JavaScript) 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.
Ci-dessous une animation SVG démarrée avec le logiciel Inkscape.

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 utiliser Inkscape pour créer les fameux fichiers "spritesheet" (grille d'images), des QR codes.
Inkscape est 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 dont SVG Optimiser.

Boxy SVG

Boxy SVG est un éditeur en ligne proposé par Google. Pour obtenir l'application (extension de Chrome) allez sur le site "Chrome web store".

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
Mais vous n'êtes plus en mode WYSIWYG ...

Sommaire de ce tuto