Table of Contents

Animation

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 Link - 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 Link - A Bucketful of SVG Examples, by Link - 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 Link - SVG section of the Link - 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 Link - can be installed, as well as external or standalone programs.

Inkscape Extensions

Link - JessyInk

Link - 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. Link - Their wiki contains tutorials and other documentation, and there is Link - some info in the Inkscape manual, as well.

Link - Sozi

Link - 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 (which has to be installed). However, to allow for a more flexible and user-friendly interface, Sozi developers have decided to make it a standalone program. At some point in the near future, the Sozi extension will no longer work with Inkscape, and users will need to install the Link - standalone version. (The Sozi extension does still work in Inkscape version 0.91, but that may be the last version of Inkscape which supports Sozi as an extension.) There is a Link - series of tutorials about the use of the extension on their website. As the standalone version is a lot more intuitive to use, the not-yet-written documentation shouldn't be an obstacle to using it.

Link - XIA

Link - 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.

Websites and Web Services

Link - AniGen

Link - AniGen 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.

Standalone Programs

Link - Xia and Link - Sozi

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.

Link - The GIMP

Link - 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 Link - 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!

Link - Tupi

Link - Tupi is a free/open source program which can animate both raster and vector images. Their Link - Docs page provides links to their wiki, as well as some video tutorials. Also check out their Link - Demos page.

Link - Synfig Studio

Link - 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 Link - their wiki.

Link - Blender

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

Scripting and Markup

There are generally 3 ways to animate SVG images: SMIL, CSS3, and JavaScript. Using these directly, without a graphical user interface in between, will require you to first learn the basics about the corresponding programming or markup language. Some of the tutorials below will help you learn, but likely you will need other resources to learn (which is beyond the scope of this page). If you already know how to write scripts and/or SVG/XML 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:

  • Link - An SVG Button - SVG and the Web - tutorial for using all 3 types of animation, on one simple SVG image - SMIL, CSS3, and JS
  • Link - Simple Animation - an example using ECMAscript to animate an SVG object
  • Link - A Neon Sign - Animation - a very brief overview of animation with Inkscape images (including info on where to find a full tutorial)
  • Link - The State of SVG Animation - a brief overview of animation of SVG images
  • From the Link - blog of Peter Collingridge - Link - several tutorials/examples of using ECMAscript to animate SVG images
  • Link - SVG Animation, by Link - David Dailey - note that the information about browser support is outdated, but the coding info is all current
  • Link - Animated SVG Graphics by David White

Link - SMIL

Link - SMIL (Synchronized Multimedia Integration Language, pronounced as 'smile'), like SVG, is a type of Link - 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 Link - 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.

  • Link - A Guide to SVG Animations (SMIL), by Link - Sara Soueidan
  • Link - Introduction to SMIL Animation in SVG, by Link - David Dailey *
  • Link - SVG Animation, by Link - Jakob Jenkov
  • Link - a series of simple live SVG/SMIL examples, by Link - David Dailey *
  • Link - another series of live SVG/SMIL examples, by Link - David Dailey *
  • Link - 4 examples of SMIL animation on Link - 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.

Link - CSS3

Link - CSS is a markup language, which is used to style webpages. For the most part, it creates static styles. But with Link - 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.

  • Link - Intro to CSS Animations by Link - Chris Coyier of Link - CSS-Tricks (approx. 30 min video)
  • Also on the Link - CSS-Tricks website, are several more articles, videos and snippets, which you can use to learn more about it.
  • Link - SVG and CSS by Link - Jakob Jenkov
  • Link - Using CSS Animations by Link - MDN (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.

  • Link - Snap.svg is a free/open source JavaScript library which provides an API for working with SVG, including, but not limited to, animations. There is plenty of documentation, as well as demos available.
  • Aaron Nieze, of Link - Go Inkscape! has written Link - a few tutorials for using Snap.svg with Inkscape.
  • Link - D3.js is a library for data visualization, using animated SVG for this. Link - Their gallery contains some spectacular demo examples!
  • Many other JavaScript libraries are available for animating svg graphics! Examples include Link - svg.js, Link - velocity.js or Link - Raphaël.