Animation

Inkscape ne gère pas nativement l'animation, bien qu'il puisse acquérir cette capacité si un développeur ou une petite équipe trouve de l'intérêt dans ce défi (si vous souhaitez développer des fonctionnalités pour l'animation dans Inkscape, commencez par rejoindre l'équipe de développement). Toutefois, il y a plusieurs moyens d'animer des images réalisées avec Inkscape (à partir du fichier SVG ou d'un export en PNG), qui sont étudiées dans cette page. Pour vous inspirer sur les possibilités de l'animation en SVG, vous pouvez examiner Un bouquet d'exemples SVG, par David Dailey.

Le support des navigateurs pour les différents types d'animation changeant avec le temps, avant de commencer un projet d'animation destiné au web, vous souhaiterez sans doute savoir d'abord quel type d'animation utiliser. Voici la section SVG du site web Can I Use?, qui regroupe l'information sur le support des navigateurs pour toutes sortes de choses.

Pour animer les images faites avec Inkscape, il y a principalement deux méthodes :

• utiliser un programme graphique proposant une interface utilisateur, ou
• écrire manuellement des scripts et des contenus descriptifs, en utilisant un éditeur de texte ou un EDI (environnement de développement intégré).

Éditeur graphique / interface utilisateur

Les programmes qui fournissent une interface graphique utilisateur sont par exemple les extensions d'Inkscape, qui sont soit fournies avec Inkscape, soit peuvent être installées, ou alors des programmes externes indépendants.

Extensions d'Inkscape

JessyInk

JessyInk est une extension d'Inkscape, qui depuis la version 0.91, est installée avec Inkscape. Elle permet d'animer le document afin d'en faire un diaporama pour présentation, pour visualisation dans les navigateurs web, en insérant du JavaScript dans le fichier SVG. Le wiki de l'extension contient des tutoriels et de la documentation supplémentaire, et il y a également des informations dans le manuel d'Inkscape.

Sozi

Sozi est une application de présentation qui produit des translations, des zooms et des rotations qui peuvent être visualisées dans les navigateurs web, en insérant du JavaScript dans le fichier SVG. Son éditeur l'avait fait démarrer comme une extension d'Inkscape (qui doit être installée). Toutefois, pour offrir une interface plus flexible et plus engageante, les développeurs de Sozi ont décidé d'en faire un programme indépendant. Dans un futur proche, l'extension Sozi ne fonctionnera plus avec Inkscape, et les utilisateurs devront installer la version indépendante (l'extension Sozi fonctionne toujours dans Inkscape version 0.91, mais c'est probablement la dernière version d'Inkscape qui supporte l'extension Sozi). Il y a une série de didacticiels sur l'utilisation de l'extension sur leur site web. La version indépendante étant beaucoup plus intuitive, vous ne devriez pas être bloqué dans son utilisation par le fait que sa documentation n'est pas encore écrite.

XIA

XIA peut être installé soit comme une extension soit comme un programme indépendant. Il crée des images HTML 5 interactives, qui sont des pages web interactives (par exemple pour les présentations), qui peuvent même contenir de petits jeux. L'interactivité inclut le clic, le survol et le glisser-déposer à la souris. La documentation est disponible sur leur site web, avec un document au format PDF, une vidéo d'instructions, et plusieurs fichiers d'exemples, présentant chaque cas d'utilisation que XIA peut créer.

Sites et services web

AniGen

AniGen est un éditeur d'animations SVG libre et ouvert fonctionnant dans un navigateur web. Il est développé principalement pour Chrome, mais devrait également fonctionner avec Firefox. L'interface utilisateur n'est pas très intuitive, mais des résultats intéressants peuvent être obtenus avec un document SVG ouvert directement pour l'édition.

Programmes indépendants

XIA et Sozi

Les deux programmes (voir ci-dessus) sont aussi disponibles en versions indépendantes. Pour Sozi, cette version envisage de remplacer l'extension, qui n'est plus développée.

The GIMP

The GIMP est un éditeur d'images 2D libre/open source, qui peut créer, importer et exporter, à la fois des images matricielles et vectorielles (il est principalement prévu pour le matriciel, mais dispose de quelques fonctionnalités vectorielles). Il a une fonctionnalité d'animation GIF relativement simple et facile d'utilisation, avec au moins 3 tutoriels sur le site web. Vous pouvez les trouver en regardant la page de Documentation. Basiquement, les images dessinées avec Inkscape doivent être exportées en PNG avant d'être importées dans GIMP (astuce : dans GIMP, utilisez Ouvrir en tant que calques). Notez qu'il existe de nombreux autres programmes qui peuvent créer des animations GIF — cherchez !

Tupi

Tupi est un programme libre/open source qui peut animer à la fois des images matricielles et vectorielles. La page de Docs propose des liens vers le wiki, et des tutoriels vidéos.

Synfig Studio

Synfig Studio est un programme d'animation libre/open source, qui peut importer et utiliser des images SVG. Depuis la version 0.91, Inkscape peut même exporter ses documents vers le format natif de Synfig, SIF. Il y a un manuel et des didacticiels dans le wiki.

Blender

Blender est une suite d'animation 3D libre/open source, qui peut importer des images SVG. Il y a un manuel et des didacticiels sur la page de Support.

Script et balisage

Il y a généralement trois moyens d'animer les images SVG : SMIL, CSS 3 et JavaScript. Les utiliser directement, sans interface graphique utilisateur intermédiaire, exigera que vous connaissiez les bases du langage de programmation ou de balisage correspondant. Certains des tutoriels ci-dessous vous aideront à apprendre, mais vous aurez sans doute besoin d'autres ressources (ce qui dépasse le cadre de cette page). Si vous savez déjà écrire des scripts et/ou du code SVG/XML, ces liens et astuces vous aideront à trouver ce dont vous avez besoin pour faire vos propres animations web, jeux et présentations cooles.

Le manuel d'Inkscape, le wiki et les sites externes offrent une bonne vue d'ensemble :

• Un bouton SVG — SVG et le web : tutoriel pour utiliser les trois types d'animation, sur une simple image SVG — SMIL, CSS3 et JS
• Simple animation : un exemple utilisant ECMAScript pour animer un objet SVG
• Un néon d'enseigne — Animation : une vue d'ensemble très brève de l'animation avec les images d'Inkscape (indiquant où trouver un tutoriel complet)
• L'état de l'animation SVG : une vue d'ensemble brève sur l'animation des images SVG
• Sur le blog de Peter Collingridge — plusieurs tutoriels/exemples d'utilisation d'ECMAScript pour animer des images SVG
• Animation SVG, par David Dailey — notez que les données sur la prise en charge par les navigateurs sont obsolètes, mais les informations sur le code sont toutes actuelles
• Graphismes SVG animés par David White

SMIL

SMIL (Synchronized Multimedia Integration Language ou langage d'intégration multimédia synchronisé — prononcé comme smile), comme SVG, est un type de XML XML (Extensible Markup Language ou langage à balises extensible). Les deux peuvent être utilisés ensemble pour créer des présentations multimédia. Il y a relativement peu de tutoriels sur l'utilisation de SMIL pour l'animation. En 2015, SMIL ne fonctionne toujours pas sur les versions actuelles d'IE, mais fonctionne sur Firefox et particulièrement bien sur Chrome et dérivés. Malheureusement, les développeurs de Google ont décidé qu'il était temps de déprécier cet outil. Voici quelques tutoriels et exemples vivants que vous pouvez étudier. Et si vous recherchez diligemment, vous en trouverez probablement plus.

• Guide des animations SVG (SMIL), par Sara Soueidan
• Introduction à l'animation SMIL en SVG, par David Dailey *
• Animation SVG, par Jakob Jenkov
• Une série d'exemples SVG/SMIL simples et vivants, par David Dailey *
• Une autre série d'exemples SVG/SMIL simples et vivants, par David Dailey *
• 4 exemples d'animation SMIL sur SVG-Whiz!

*  Notez que ces pages ont un certain âge. Néanmoins, le code utilisé dans les exemples est toujours actuel et fonctionne dans les navigateurs qui le supportent.

CSS 3

CSS est un langage de balisage, qui est utilisé pour styliser les pages web. La plupart de ses possibilités permettent de créer des styles statiques. Mais avec CSS 3, de nouvelles fonctionnalités ont été ajoutées et peuvent être utilisées pour créer des animations allant du très simple au plutôt complexe. Il y a une pléthore de tutoriels sur l'animation CSS 3 sur Internet ! En voici quelques-uns, et vous en trouverez facilement plus en cherchant, si ceux-ci ne vous conviennent pas.

• Intro aux animations CSS par Chris Coyier de CSS-Tricks (vidéo d'environ 30 min)
• Également sur le site web CSS-Tricks se trouvent davantage d'articles, vidéos et morceaux de code que vous pouvez utiliser pour en savoir plus
• SVG et CSS par Jakob Jenkov
• Utiliser les animations CSS sur le MDN (Mozilla Development Network)

JavaScript

JavaScript / ECMAScript est un langage de programmation qui est principalement utilisé pour améliorer l'expérience utilisateur sur les sites web. En contraste avec CSS 3, il peut animer tous les aspects du SVG (chemins compris), et est le moyen d'animer le plus flexible. En même temps, c'est certainement le moyen le plus compliqué à apprendre, puisqu'il nécessite d'apprendre un vrai langage de programmation.

• Snap.svg est une bibliothèque JavaScript libre/open source qui fournit une API pour travailler avec le SVG, incluant entre autres l'animation. Beaucoup de documentation ainsi que des démos sont disponibles.
• Aaron Nieze de Go Inkscape! a écrit quelques tutoriels sur l'utilisation de Snap.svg avec Inkscape.
• D3.js est une bibliothèque pour la visualisation de données, utilisant du SVG animé pour cela. La galerie contient des exemples de démonstrations spectaculaires !
• De nombreuses autres bibliothèques JavaScript pour l'animation de graphismes en SVG existent ! Par exemple : svg.js, velocity.js et Raphaël.