The following are the possible ways to create professional animations in SVG:

1) ANIMATE WITH SMIL

SVG is the universal standard format for vector graphics images. The best feature of the SVG format is its internal animation markup language, SMIL. The acronim stands for Synchronized Multimedia Integration Language, and was originally introduced by the W3C as a descriptive language for animations on the web. It was so powerful that it quickly became popular outside the web sphere, and the standard way to save and exchange vector animations between different software and platforms in many fields of the computer graphics world. An open standard like SVG SMIL was a godsend for an industry plagued by the unfair practice of “format lock-in”. Many professional animation tools used by the big studios used their own closed proprietary file format for vector animations, to prevent customers from switching. SMIL allowed the studios to break the chains of proprietary formats lock-in, and to exchange easily their animations with all people in the world. Thanks to SMIL you can be a japanese artist working with an obscure animation software in Tokyo, and yet you can send your work to an animation studio in Los Angeles that uses another completely different software without any problem. In a few years this allowed SVG to become the “lingua franca” of vector animations. Today millions of people on their smartphones communicate through apps, like Viber or Snapchat, that use SVG and SMIL for their animated stickers.


At the same time SMIL was having an hard time on the web, because Microsoft refused to support it in its browser IE. The decision stemmed from the fact that SMIL was a direct competitor of Microsoft own vector descriptive language for the web, called XAML. Microsoft was the only provider of XAML enabled development tools, like the Visual Studio IDE, and because of this the developers were obligated to buy them. Of course, as many non standard things, XAML failed in the end. Nobody uses it anymore. But the damage was done, and SMIL, born for the web, was already used everywhere but there. Once again corporate greed and and short-sighted behaviour by company executives were responsible for delaying by 15 years one of the best technology the web ever had. You can find more about the troubled history of SVG in the excellent article “The Fall and Rise of SVG” by Max Dunn.


Luckily, the recent technical developments in the web allowed the birth of “polyfill” libraries for SMIL, like FakeSmile or Willigers. The advent of polyfills was a game changer for the web. Thanks to them, browser vendors were not able to impose restrictions on web standards anymore. A polyfill is a special javascript piece of code that provides support for features missing from a browser, translating the original encoding in one that the browser can understand. For example the SMIL polyfill made by Eric Willigers does just that: it translates SMIL into Web Animations API commands that even the Microsoft browser EDGE is going to support. It is so efficient that Google Chrome developers decided to drop native SMIL support and focus on Web Animations, leaving to the Eric Willigers polyfill the task to play SMIL files in Chrome. Someone wrongly interpreted this as a deprecation of SMIL by Chrome, and criticized the devs for this choice. But it was not a true deprecation, just a relocation of the job of interpreting SMIL on a polyfill level. In fact the Chrome devs themselves cited the Willigers polyfill in the very official announce about their intent to deprecate SMIL. So if you read around the web about the demise of SMIL, don’t worry. The “death” of SMIL was greatly exaggerated. It’s more like a rebirth.

In fact the performances with the polyfill are often better than with the old native SMIL interpreter, because on many browsers the Web Animations API is hardware accelerated, while SMIL is usually not.

UPDATE (08/09/2016): Google luckily announced that its intent to deprecate SMIL in Chrome was cancelled due to popular demand. Too many people use it.


There are two ways to animate SVG using SMIL:

  • Code SMIL directly

This is usually not an option for graphic artists, who prefer a visual approach to a programmatic one. But for the few technically minded artists, it is a plus being able to add special effects or fix details to the animations editing directly the SVG files and changing the code. Being SMIL a descriptive markup language, it is not very difficult to use. A good introductory guide is here:


  • Export your SMIL animations from a graphics application.

The standard way to produce SVG animations with SMIL is to create them in applications like Adobe Animate CC and similar others (see the section below for a list), and then using plugins like Flash2svg to export them in SVG.

The Flash2svg add-on, created by the very talented Tom Byrne, is a marvel. With it you can export from Adobe Animate CC almost all animations+sound as a single self-contained SVG file. Even entire cartoon episodes like this one:

If you need to use the SVG animation for cartoon editing or video production, you can then import the resulting SVG file in your editing software, for example Adobe After Effects.

If you need to use SVG animations on the web, being SMIL not supported by all browsers, you should add a polyfill to your web page. One popular polyfill is the FakeSmile polyfill , working on almost all browsers. It is simple and effective. A less popular polyfill is the SIE polyfill. SIE supports SMIL on all browsers, but it is also a polyfill for the static SVG format, and that is not so useful today, because static SVG is now supported natively everywhere. Being also the author a japanese coder, english documentation is hard to find. Another more advanced one is the smil polyfill made by Eric Willigers, a Google employee. Willigers polyfill uses the new Web Animations API and it is then hardware accelerated on browsers supporting it. You just need to add those javascript libraries to the page like in the following example:

Demo page without the smil polyfill:

And the same page with the smil polyfill:


2) ANIMATE WITH JAVASCRIPT LIBRARIES

The javascript way is more complicated. First of all you need to be a javascript programmer. And this is already rare for a graphic artist. Then you have to choose between many libraries. Those libraries are useful for creating very simple animations. But creating animations by code is very hard and not comparable with drawing them visually. This is why most of the svg animations found on the web are usually ugly. A mixed method is much more efficient: first you create the frames visually, and then you use the javascript libraries to animate them.


The most popular of those are:

  • SnapSVG

This library is the successor of the old and popular Raphael animation library made by the same author, Dmitry Baranovskiy, a true legend in this field. He was the one responsible to bring SVG back from the grave in the web world with his seminal presentation “You don’t know SVG” made during Web Directions Code ’14 conference. His library is very stable and easy to use, but it converts SVG in an internal format at runtime to animate it. Morphing options are also very basic, just linear interpolation. But being free, it’s already very popular on the web, where it is considered “the jQuery of SVG”.

There is also a snap.svg plugin for Adobe Animate CC, but the exported files are bloated. The exporter produces one snap svg command for every frame of the animation, not every keyframe, producing a 18Kb svg file with over 1000 lines of code, just to rotate a simple rectangle through 360 degrees. Flash2svg plugin is much more efficient: just a couple of SMIL commands and few bytes to do the same job.


  • Greensock MorphSVG

A fully featured morphing library that allows to easily animate SVG, and without the need to convert them in an internal format. Just create 3–4 svg keyframes in Inkscape and the Greensock SVGMorphing lib will automatically interpolate between the frames and create all the in-between frames for a smooth playback. Here is an example:

Paired with the more general purpouse Greensock SVG animation library, it’s the most powerful solution out there if you target the web. The only drawback is that it’s commercial. But if you can afford it, you can find a good introductory tutorial here:

I also reccomend the excellent tutorials by the SVG guru Chris Gannon, like this one on the now popular SPLAT animations effect for a better button interactions feedback:


  • 3D Seen.js

Not directly related to 2D animations, but interesting nonetheless. If you want to animate SVG in 3D this library is very powerful. Seen.js renders 3D .obj files meshes in SVG and animates them very easily.


3) ANIMATE WITH CSS

CSS is a popular markup language created to style HTML pages. Recently the standard was expanded to include some animations functionalities, and it is now widely adopted on the web. Being a language designed to style HTML pages, many of its features have a very broad focus, and it is not specialized like SMIL. This is why this option is the most limited. Currently there is a tool called SMIL2CSS that convert SMIL markup in CSS animations instructions. But there are many features of SMIL that cannot be translated because they are not available in CSS, as you can see from this page:

This is why there are no applications that export in SVG+CSS either. For an artist that doesn’t want to code its own animations but needs to draw them visually, like most of the pro, CSS is the less recommended option.

But if you choose this way, this article by Sara Soueidan, an authority in this field, is a great introduction:


4) SVG ANIMATIONS FOR VIDEOGAMES

SVG is widely used in development of 2D videogames on mobile, desktop and consoles. There are many ways to use it, so the list would be long. One of the most popular methods is this:

  • Animate SVG with Unity

Unity ( https://unity3d.com/ ) is the most popular multi platform development kit for videogames. It supports almost all existing platforms, and offers advanced tools to develop 2D games with SVG graphics, like the powerful SVG Importer and the Spine animation tool. For example you can read how the developers of Minpi Dreams for iOS and Android made their game using only SVG assets made in Inkscape here: https://madewith.unity.com/stories/using-unity-plugins-development-mimpi-dreams-1


5) SVG ANIMATIONS FOR MOBILE APPS UI

Beyond videogames, there is also a growing usage of SVG assets and animations for developing mobile Apps UI in a scalable and device resolution independent way. Animated SVG buttons, icons and controls are now often made with SVG. For example the popular (100M+ users) instant communication app Viber uses SVG SMIL animated emoticons (see: http://www.tbyrne.org/viber-animated-svgs ). The list of tools is huge, but the most popular ways to use SVG in mobile apps are the following:

  • NGraphics

NGraphics is a crossplatform library that allows you to use SVG assets on many different platforms, from desktop to mobile iOS or Android. It still doesn’t support the full SVG 1.1 specifications, but it is open source and it is regulary adding features. The strength of this library lies in the fact that it uses optimized pipelines for rendering SVG on each different platform, not a general one. Because of that NGraphics is currently the faster vector rendering library around. No SMIL animations support for now. You have to convert the SMIL code to NGraphics API programming code manually. But this is a feature already requested (see: https://github.com/praeclarum/NGraphics/issues/54 ), so we can hopefully see it in the future.

  • Vector-Compat

Vector-Compat is a library specifically designed for Android. It is very popular because it extends the support for SVG to many Android OS versions, old and new. Android supports a native vector format called VectorDrawable, and to use SVG assets you need to convert them in this format first. Vector-Compat does this conversion and offers many animation options, including morphing. Still no option for importing the SMIL animations included in the SVG, but it is a feature already been requested (see: https://github.com/wnafee/vector-compat/issues/31 ) and hopefully in development.


  • AndroidSVG

As I said, vector assets on Android are usually stored in the native VectorDrawable format created by Google. But the vectorDrawable format has some limitations, and does not support all SVG features. For a full support of SVG on Android you can use this open source library made by Paul LeBeau: AndroidSVG. This is a very popular library, because it allows you to use all your SVG files exported from Inkscape, Adobe Illustrator, Affinity Designer, and so on, without the need to modify them. For example the app Snapchat uses this library for its SVG “sticker picker” system. Filter Effects are not supported yet, but Paul is already working to add them. SMIL support for animated svg is also missing, but the feature request is already present in the project repository, and hopefully under development.


THE TOOLS FOR CREATING SVG ANIMATIONS

1) SVG IMAGES EDITORS

As for the tools, you can create the animation keyframes with the following software:

  • Inkscape

Free and open source, with tons of features, Inkscape it’s an advanced vector editing application made by people partecipating in the SVG Working Group. The “de facto” reference for the SVG format. Not easy to learn, but a must have for every SVG artist. It is also free and open source, something rare for a software of such high quality.


  • Adobe Illustrator

A commercial, very powerful vector drawing software, Adobe Illustrator offers an excellent UI and many advanced features still not supported by SVG, but it has also the worst compatibility with the format. You will often need to manually edit the exported SVG file to fix illustrator mess. But it is very popular in art schools, and all graphicians know how to use it. It’s considered the Photoshop of vector drawing.


  • Affinity Designer

This is a commercial software like Adobe Illustrator, but with an excellent SVG compatibility, almost at the level of Inkscape. The UI is much more friendly, with one of the best usability in the field, and it is now becoming very popular among SVG artists. You do not find the detailed control on the SVG format that Inkscape offers, but for the less technically minded artist it’s surely much better, especially considering the excellent support of graphics tablets and pressure sensitive pencils.


  • XARA Designer Pro

Xara Designer Pro is a vector graphics editor that can import and export in SVG format. It has many drawing tools, including a morphing shape tool. Unfortunately it does’t export the morphing frames as a SVG SMIL animation, becaus it supports only static SVGs. The UI is very old, and it suffers from a certain lack of usability. Things that you can make intuitively with Affinity Designer, in Xara require you to consult the manual. It is also expensive compared to Affinity Designer. But if you need to create an SVG keyframe, it does its job.


  • Autodesk Graphics

Autodesk Graphics is a relatively new entry. Its set of tools is more oriented toward designers than artists, but it is very precise and you can create very complex SVG images. It has also an iPad and an iPad Pro pencil-optimized version, and that is a plus for those who need to work while traveling.


2) SVG ANIMATION EDITORS

The SVG animations editors I feel to recommend are the following:

  • Adobe Animate CC

The former Adobe Flash Pro was fully rewritten by Adobe to migrate from the now obsolete flash animations to the modern SVG animations. You can export the resulting SVG animations along with a custom javascript library, or choose to save in SVG+SMIL using plugins like “flash2svg”. This last option is very efficient, I always use it instead of the bloated native exporter.

You can download the free plugin from here:

Or install it from Adobe Plugins panel:

Here is an example SVG animation made in Adobe Animate CC and exported with flash2svg:


  • Adobe After Effects + Bodymovin Plugin

By itself After Effects, the popular video editing and compositing tool by Adobe, does not support SVG. Due to the growing demand, addons are now appearing to allow the creation of SVG animations. One of those is the Bodymovin plugin by Hernan Torrisi. I did not have the chance to try it yet, but it is already producing interesting SVG animated websites, like this one made for the UK based financial company Fleximize:

Currently the plugin offers no option to import SVG, but only to export it. I talked with Torrisi and he is planning to add this option in the future.


  • CACANi

CACANi is a very powerful SVG animation software made by a Singapore company, and widely used by professional asian animators and studios. Many popular anime have being made with it. CACANi makes very easy to animate because it generates in-betweens automatically using an intelligent morphing algorithm. It is a truly next generation animation software. The UI, as in most asian applications, is very hard to learn. And the documentation is very poor, and hard to find. But there is a growing community, and tons of video and examples. And the results are amazing.


  • Anime Studio

Anime Studio is a good SVG animation application, with many options, but being very old it has a outdated approach to the animation editing, especially compared by the more modern CACANi. But it is less expensive and it does its job well, with a huge amount of documentation, tutorials and examples, and a big community.


  • CelAction2D

CelAction2D is professional software for cartoon animations, widely used in USA big tv production studios. It imports SVG and offers tons features of high quality. Not usable and efficient like CACANi, but being a very old platform it is well known to many professional animators working in the field and there are textbooks to learn it. It is very expensive, and you also need to pay for additional support and scripts. This is hardly first choice for a beginner.


  • Toonz

Toonz is the software used by Studio Ghibli in Japan, so it doesn’t need any presentation. It is an high level professional software developed in Italy, harder to learn yet easier to use than CelAction2D, but still far from offering the productivity and the usability of CACANi. On the other end, being an high profile production tool, offers many professional features that the latter, younger competitor, is still missing. SVG is well integrated in Toonz. SVG files can be loaded into Toonz, and files are automatically converted into Toonz Vector Levels. Also if you are searching for work in the land of anime production (Japan, China, South Korea, Singapore, etc.) it is one of the most used, second only to the non-vector and bitmap based dinosaur RETAS!PRO HD, a relic still behind the majority of asian productions. Being Toonz very expensive and complex, I don’t reccomend it to beginners. UPDATE: Just after I wrote this, the company behind Toonz announced a free and open source version of Toonz! You can download it from their Github repository. A list of useful tutorials is here.


I hope to have provided you a good overview of the amazing world of SVG animation. Follow this blog for more! :-)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.