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:
- An SVG Button — SVG and the Web — tutorial for using all 3 types of animation, in one SVG — SMIL, CSS3, and JS
- Simple Animation — an example using ECMAscript to animate an SVG object
- A Neon Sign - Animation — overview of animation with Inkscape images
- The State of SVG Animation — overview of animation of SVG images
- Several tutorials/examples — using ECMAscript to animate SVG images, by Peter Collingridge
- SVG Animation — by David Dailey. The information about browser support is outdated, but the coding info is all current
- Animated SVG Graphics — by David White
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.
- A Guide to SVG Animations (SMIL), by Sara Soueidan
- Introduction to SMIL Animation in SVG, by David Dailey *
- SVG Animation, by Jakob Jenkov
- a series of simple live SVG/SMIL examples, by David Dailey *
- another series of live SVG/SMIL examples, by David Dailey *
- 4 examples of SMIL animation on SVG-Whiz!
* 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 :
- Video: Intro to CSS Animations by Chris Coyier of CSS-Tricks
- CSS-Tricks website, have several articles, videos and snippets, which you can use to learn more about it.
- SVG and CSS by Jakob Jenkov
- Using CSS Animations by Mozilla Development Network
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