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 (donc un fichier).
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 (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.