(Translated by https://www.hiragana.jp/)
Animation | Inkscape

Animation

Inkscape does not support animation natively but SVG files do. Although Inkscape might add support someday, if any programmer becomes interested in tackling the challenge. If you are interested in programming animation features into Inkscape, please start by joining the development team.

Meanwhile, there are several ways to animate images made with Inkscape, whether as SVG, GIF or exported to a PNG sequence. If you want to see what is possible to make with SVG animations, look at  SVG animations Examples, by David Dailey.

Because browser support for various types of animation changes over time, before you start on any animation project destined for the internet, you may want to do some research about which type of animation to use. Here's the SVG section of the "Can I Use? " website, which keeps current info about browser support for SVG features.

Graphical Editors

Inkscape extensions, which either come with Inkscape, or can be installed, and standalone programs with a graphical user interface.

Inkscape Extensions

JessyInk

JessyInk is an Inkscape extension, which as of version 0.91, comes installed with Inkscape. It creates a slideshow type of animation for presentations, to be viewed in web browsers, by means of embedding JavaScript in the SVG file. Their wiki contains tutorials and other documentation, and there is some info in the Inkscape manual, as well.

XIA

XIA can be installed either as an extension or a standalone program. It creates HTML5 interactive images, which consist of interactive webpages (such as for presentations), that can even contain simple games. Interactivity includes mouse click, hover, and drag and drop. On their website can be found documentation in the form of a PDF file, an instructional video, and several example files, showing each use case which XIA can create.

 

Standalone Programs

Xia

See above for description.

Sozi

Sozi is a presentation application which produces translations, zooms and rotations to be viewed in web browsers, by means of embedding JavaScript in the SVG file. It's editor started its life as an Inkscape extension (legacy). There is more feature rich standalone software. Download it here
Video Tutorials series -  How to use Sozi

Blender

Blender is a free/open source 3D animation suite, which can also import SVG . There are both manual and tutorials on their Support page.

Tupi

Tupi is a free/open source program which can animate both raster and vector images. Their Documentation page provides links to their manual, tutorials, examples, faq, and more.

Synfig Studio

Synfig Studio is a free/open source 2D animation program, which can import and utilize SVG images. Starting with version 0.91, Inkscape can even export the native Synfig format, SIF. There are both a manual and tutorials in their wiki.

Friction

friction.graphics is a powerful and versatile motion graphics application that allows you to create stunning vector and raster animations for web and video platforms with ease. You can import your SVG files from Inkscape and animate them.

Inka

Is a free and open source program that leverages Inkscape's SVG editing capabilities to create animations. It uses CSS animations under the hood.

Krita

You can import your SVGs into Krita and use Krita's animation tools.

 

SVG Animation with code

There are generally 3 ways to animate SVG with code: SMIL, CSS3, and JavaScript. Using these directly, without a graphical user interface, will require you to first learn the basics about the corresponding programming or markup language. If you already know how to write scripts and SVG code, these links and hints will help you to find what you need to make your own web animations, games and cool presentations.

The Inkscape manual, wiki and external sites together provide a nice overview:

SMIL

SMIL (Synchronized Multimedia Integration Language, pronounced as 'smile'), like SVG, is a type of XML (Extensible Markup Language). They can be used together to create multimedia presentations. There are relatively few tutorials on using SMIL for animation. As of 2015, SMIL still does not work with current versions of IE, but does work in Firefox and especially well in Chrome-based browsers. Unfortunately, the Google developers decided it might be time to deprecate the feature. Here are a couple of tutorials, and live examples which you can study. And if you search diligently, you'll probably find more.

* Note that these pages are a bit dated. However, the code used in the examples is still current and does work in the browsers that support it.

CSS3

CSS is a markup language, which is used to style web pages. For the most part, it creates static styles. But with CSS3, new animation features were added. They can be used for intresting and also interactive animations. There is absolutely a plethora of tutorials on CSS3 animation, across the internet! Here are just a couple :

JavaScript

JavaScript / ECMAScript is a programming language which is mainly used to improve the user experience on websites. In contrast to CSS3, it can animate every aspect of SVG (also paths), and provides the best flexibility of all three animation options. At the same time, it is probably the most difficult option to learn, as it requires learning a real programming language.

  • Snap.svg - free/open source JavaScript library which provides an API for working with SVG, including, but not limited to, animations. You can also checkout tutorials for using Snap.svg with Inkscape by Aaron Nieze, of Go Inkscape!.
  • D3.js  -  is a library for data visualization, using animated SVG for this. Also check out their gallery.
  • svg.js  - lightweight library for manipulating and animating SVG (svg.js tutorials)
  • velocity.js -  animation engine with the same API as jQuery's $.animate()
  • Raphaël - cross-browser vector graphics the easy way