Inkscape does not support animation natively, although it might someday, if any individual programmer, or small team 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 or exported to PNG), which are explored on this page. Just to inspire you about the possiblities of SVG animation, you may want to peruse A Bucketful of SVG 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 preliminary 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 all kinds of things.
The modes for animating images made with Inkscape fall into 2 general forms:
- using a graphical program providing a user interface, or
- manually writing scripts and markup, using a text editor or an IDE (integrated development environment).
Graphical Editor / User Interface
Programs which provide a graphical user interface include Inkscape extensions, which either come with Inkscape, or can be installed, as well as external or standalone programs.
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.
Both programs (see above) are also available as standalone versions. For Sozi, this is intended as a replacement for the extension, which is no longer being developed.
The GIMP is a free/open source, 2D graphics editor, which can create, import and export, both raster and vector images. (It's primarily for raster graphics, but has some minimal vector features.) It has a relatively simple and easy to use GIF animation feature, with at least 3 tutorials on their website. You can find them by looking through their Documentation page. Basically, images drawn with Inkscape need to be exported to PNG, before they are imported into GIMP (hint: in GIMP, use Import as Layers). Note that there are MANY other programs which can create GIF animations - just search!
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.
Scripting and Markup
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, on one simple SVG image - SMIL, CSS3, and JS
- Simple Animation - an example using ECMAscript to animate an SVG object
- A Neon Sign - Animation - a very brief overview of animation with Inkscape images (including info on where to find a full tutorial)
- The State of SVG Animation - a brief overview of animation of SVG images
- From the blog of Peter Collingridge - several tutorials/examples of using ECMAscript to animate SVG images
- SVG Animation, by David Dailey - note that the information about browser support is outdated, but the coding info is all current
- Animated SVG Graphics by David White
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.
CSS is a markup language, which is used to style webpages. For the most part, it creates static styles. But with CSS3, some new features were added which can be used to create animations ranging from very simple to quite complex. There is absolutely a plethora of tutorials on CSS3 animation, across the internet! Here are just a couple, and you'll easily find more by searching, if these aren't to your liking.
- Intro to CSS Animations by Chris Coyier of CSS-Tricks (approx. 30 min video)
- Also on the CSS-Tricks website, are several more articles, videos and snippets, which you can use to learn more about it.
- SVG and CSS by Jakob Jenkov
- Using CSS Animations by MDN (Mozilla Development Network)
- Aaron Nieze, of Go Inkscape! has written a few tutorials for using Snap.svg with Inkscape.
- D3.js is a library for data visualization, using animated SVG for this. Their gallery contains some spectacular demo examples!