Techniques simples pour animer des graphiques avec Inkscape

Bien que Inkscape ne prenne pas en charge les animations de manière native, il existe de nombreuses façons d’animer des images créées avec ce logiciel. Cela peut se faire à l’aide de programmes graphiques dotés d’une interface ou en écrivant manuellement des scripts et du balisage. Vous souhaitez en savoir plus ? C’est parti !

Extensions Inkscape pour l’animation

1. JessyInk :
   • JessyInk est une extension préinstallée avec Inkscape depuis la version 0.91. Elle permet de créer des présentations animées affichables dans les navigateurs via du JavaScript intégré au fichier SVG.
   • Pour plus d’informations, consultez son wiki.
2. Sozi :
   • Sozi est une application qui crée des animations de type zoom, translation et rotation, intégrées dans les fichiers SVG via JavaScript. Elle a débuté comme extension pour Inkscape, mais est aujourd’hui un logiciel indépendant, plus flexible.
   • Vous pouvez encore l’utiliser dans Inkscape 0.91, mais il est recommandé d’opter pour la version autonome.
3. XIA :
   • XIA peut être installé comme extension ou comme programme indépendant. Il permet de créer des images HTML5 interactives avec clics, survols ou glissements.
   • Documentation et exemples disponibles sur son site officiel.

Logiciels indépendants

1. GIMP :
   • GIMP est un éditeur d’images 2D open source qui prend en charge les images raster et vectorielles. Il permet de créer des GIF animés à partir d’images exportées depuis Inkscape.
   • Tutoriels et documentation disponibles sur le site de GIMP.
2. Tupi :
   • Tupi est un logiciel libre d’animation 2D, prenant en charge les graphismes vectoriels et raster. Il propose une documentation riche en tutoriels et exemples.
3. Synfig Studio :
   • Synfig Studio est un autre logiciel gratuit et open source pour l’animation 2D. Il peut importer des fichiers SVG et Inkscape peut exporter vers son format natif (SIF) depuis la version 0.91.
   • En savoir plus via leur wiki.

Animation via scripting et balisage

Pour les utilisateurs plus techniques, animer des fichiers SVG via scripting est tout à fait envisageable. Les méthodes les plus courantes incluent SMIL, CSS3 et JavaScript.

SMIL (Synchronized Multimedia Integration Language)

• SMIL est un langage XML qui, combiné à SVG, permet de créer des animations multimédia. Bien qu’il ne soit pas pris en charge par tous les navigateurs (comme IE), il fonctionne dans Firefox et Chrome.
• Un tutoriel utile : A Guide to SVG Animations (SMIL) de Sara Soueidan.

CSS3

• CSS3 permet de créer des animations simples ou complexes. Il existe une abondance de tutoriels disponibles en ligne.
• Une bonne introduction : Intro to CSS Animations de Chris Coyier.

JavaScript

• JavaScript offre la plus grande flexibilité pour animer des SVG, en permettant de modifier n’importe quel aspect. C’est aussi l’approche la plus complexe car elle demande des connaissances en programmation.
• Des bibliothèques comme Snap.svg, D3.js et svg.js facilitent ce travail et offrent documentation et exemples.