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.
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.
Demo page without the smil polyfill:
And the same page with the smil polyfill:
The most popular of those are:
SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size…snapsvg.io
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
MorphSVGPlugin provides advanced control over tweens that morph SVG paths. The video below details what you need to know…greensock.com
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:
A list of common SVG animation challenges along with GSAP solutions. This page is intended to be a go-to resource for…greensock.com
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
Vector Graphics in Unity Links: Website | Forum | Videos | DEMO Mimpi Dreams was made with SVG Importer SVG importer…www.assetstore.unity3d.com
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 is a cross platform library for rendering vector graphics on .NET. It provides a unified API for both…github.com
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.
A support library for VectorDrawable and AnimatedVectorDrawable introduced in Lollipop with fully backwards compatible…github.com
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 is a SVG parser and renderer for Android. It has almost complete support for the static visual elements of…bigbadaboom.github.io
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 is professional quality vector graphics software which runs on Windows, Mac OS X and Linux.inkscape.org
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
Download Adobe Illustrator CC graphic design software when you get started with Creative Cloud. Start your free trial…www.adobe.com
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
Affinity Designer - the fastest, smoothest, most precise professional graphic design software, exclusively for Mac.affinity.serif.com
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: Quite simply the world's fastest graphics software, with truly flexible illustration tools and…www.xara.com
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 Graphic is a modern full-featured graphic design and illustration application, created specifically for Mac OS…graphic.com
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
Download Adobe Animate CC HTML5, vector and flash animation software when you get started with Creative Cloud. Start…www.adobe.com
You can download the free plugin from here:
Or install it from Adobe Plugins panel:
Here you can access, view, and share creative files saved in Adobe Creative Cloud from virtually any internet-connected…creative.adobe.com
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:
Come with us, on a journey through space and time (and glorious HTML5). Your mission to help small business starts here…fleximize.com
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.
Made with CACANi Made with CACANi Made with CACANi Made with CACANi We believe in the balance of power and simplicity.…cacani.sg
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
Buy the best animation software for creating cartoons, 2D movies, or cutout animations direct from Smith Micro - Anime…my.smithmicro.com
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 is professional 2D animation software for films, TV series and commercials. It is the software of choice…www.celaction.com
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 Harlequin 7.1: the traditional & paperless animation softwarewww.toonz.com
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! :-)