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 .) 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 , by .
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 of the 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 , as well as external or standalone programs.
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.
Websites and Web Services
is a browser-based, Free and Open Source SVG animation editor. Development is focused on Chrome, but it should work ok in Firefox, too. User interface is a bit hard to use at first, but decent results can be achieved with an inkscape source svg opened directly for editing.
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.
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 . 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!
is a free/open source program which can animate both raster and vector images. Their provides links to their wiki, as well as some video tutorials. Also check out their .
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 .
is a free/open source 3D animation suite, which can import SVG images. There are both manual and tutorials on their .
Scripting and Markup
The Inkscape manual, wiki and external sites together provide a nice overview:
- - tutorial for using all 3 types of animation, on one simple SVG image - SMIL, CSS3, and JS
- - an example using ECMAscript to animate an SVG object
- - a very brief overview of animation with Inkscape images (including info on where to find a full tutorial)
- - a brief overview of animation of SVG images
- From the - of using ECMAscript to animate SVG images
- , by - note that the information about browser support is outdated, but the coding info is all current
- by David White
(Synchronized Multimedia Integration Language, pronounced as 'smile'), like SVG, is a type of (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 . Here are a couple of tutorials, and live examples which you can study. And if you search diligently, you'll probably find more.
- , by
- , by *
- , by
- , by *
- , by *
* 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.
is a markup language, which is used to style webpages. For the most part, it creates static styles. But with , 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.
- by of (approx. 30 min video)
- Also on the website, are several more articles, videos and snippets, which you can use to learn more about it.
- by (Mozilla Development Network)
- Aaron Nieze, of has written for using Snap.svg with Inkscape.
- is a library for data visualization, using animated SVG for this. contains some spectacular demo examples!