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

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.

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

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.

Websites and Web Services

AniGen

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

Xia and 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.

GIMP

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!

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.

enve

enve is a relatively young free/libre 2D animation software with support for both importing SVG files and creating animated SVG documents.

Blender

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

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.

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:

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

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 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 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!
  • Many other JavaScript libraries are available for animating svg graphics! Examples include svg.js, velocity.js or Raphaël.