Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Vector graphics are now taking over the web and even mobile applications. Icons, buttons and elements of web pages or mobile apps are now becoming increasingly vector based, dropping bitmaps because of the need to be rendered on all kind of screen resolutions, dpi, ratios, etc. and because the useful ability to "zoom" to better read pages on mobile browsers made the bitmaps assets ugly and unusable anymore.

So it's time to start creating animated icons, backgrounds and controls in SVG but how do you animate SVG files?

share|improve this question
1  
Your question is very broad and may generate opinion-based answers which are not the best fit for the GDSE. Please review our help to see how best to ask/answer questions. Also "best" is always very subjective and context-sensitive when it comes to tools and processes. – bemdesign Mar 10 at 12:25
    
If you want to know about SVG animations for web use, maybe you should streamline your question and ask it in stackoverflow.com. – Luciano Mar 10 at 13:16
    
This is a very important and frequently answered question. Please contribute with your answers if you know other tools or libraries for animating svg. Thank you. – Emanuele Sabetta Mar 10 at 15:14
3  
The issue I have with this question is it can be considered a resource gathering question based on asking for the tools. I do not mind the question if we can focus on what we should be really discussing, the execution of SVG animation. I've edited your question to better stay in scope. – Darth_Vader Mar 10 at 16:28

A lot of this answer is also posted in this related question on how to animate illustrations for the web.


Avoid SMIL animations

Sara Soueidan, probably the best animator of SVGs on the web, wrote "I know I wrote the guide to SMIL animations but, seeing their future, I don’t personally use them anymore." You shouldn't either.

SMIL animations don't work in any IE, Edge, some mobile browsers, and are being dropped by Chrome/Opera. You should avoid using them.

Use CSS for very simple animations

SVG can largely be animated using pure CSS (including using :hover states, transforms, transitions, and animations). It's planned to get full CSS animation support but currently only some are supported and can be buggy with cross browser issues.

Sara Soueidan says CSS is great for animating SVGs but prefers JS because it helps solve these cross browser issues. As such, use it when you can but fall back to JS when the animations are more complex or don't work cross-browser.

Use JavaScript animations if CSS won't work

Most of the time, SVGs can be animated using a little JavaScript without the need of a JavaScript animation library. Animating in JS has much more cross browser support and is fairly easy to use with some basic understanding.

For complex animations that require the use of a timeline or something similar, using a library like GSAP can be very helpful. There are countless other SVG animation libraries, Snap.svg is another big one, but most don't handle animations nearly as easily or as performant as GSAP.

For particular types of animation, using a particular JS plugin like GSAP's MorphSVG can save you quite a bit of time because they take care of the cross browser issues and all of the calculations. However, most animations don't require plugins like this.

Tooling

The only software I have come across that exports to SVG+JS are an Adobe After Effects plugin called Bodymovin and a small online tool called SVG Circus. Other than that, software animators like Adobe Edge Animate, Adobe Animate CC, or Animatron export to SMIL animations which shouldn't be used. As such, it's best to have some developer make SVG+CSS or SVG+JS animations using exported SVGs from an editor. Inkscape has a great resource linking tutorials and examples of how to do this.

I'm sure in the future more animation software will support exporting to SVG+JS.


Some other important notes

  • It's important to keep in mind performance. Sara Drasner created some performance benchmarks for SVG which shows you should opt for hardware accelerated CSS animations whenever possible but fallback on a good JavaScript approach when not possible.

  • It's best to use SVGs in an <object> tag or embedded directly in an <svg> XML element if it's interactive and as a background image if its not interactive, but there are other ways to do it as well.


For a more whole view of web animations, read Rachel Nabor's recent post on A List Part. For some additional suggestions in tooling, this post is very helpful, though I don't agree with all of the sentiments, especially with how it presents SMIL animations.

share|improve this answer
    
- SVG is used on mobile apps too. The biggest growth for SVG in the last two years was in app UI vector assets. Bitmaps are not used anymore. – Emanuele Sabetta Mar 10 at 18:30
    
Also, currently there is no way to create a big animation with CSS. You need SMIL to create big animations like this: tbyrne.org/portfolio/smil/LoveDota.svg – Emanuele Sabetta Mar 10 at 18:32
    
About the choice of the Chrome dev team to stop supporting SMIL, they in the very thread of such announce told that the main reason was the fact that you can now use SMIL via this polyfill: github.com/ericwilligers/svg-animation – Emanuele Sabetta Mar 10 at 18:34
4  
geez, I'm all for pitchforking the hell out of technologies if they suck, but oh boy Flash handled vector animations even before it had that name 20 (!) years ago. It makes me sad to read this (great and informative, +1) answer that starts with how stuff doesn't work across browsers and ends with how there might be something like a standard in the future, maybe (and all fingers crossed be implemented somewhere). And if the paragraph on "Tooling" starts with "The only software...", something is wrong. Dear internet, please get your sh*t together. – rapidograph Mar 10 at 20:05
1  
You should also check Bodymovin that exports animations from After Effects to svg +JS github.com/bodymovin/bodymovin – airnan Mar 11 at 12:40

I've always found relying on anything other than JS libraries to be a huge pain WRT support/maintenance.

I've always used D3.js. It was originally created to create interactive SVG/DOM elements from data-sets. However, you can you it to modify SVG/DOM that is included in a page, as long as JS has access to it.

I've use in a variety of projects to create/animate SVG/DOM. some examples includ soft real-time dashboards, map visualizations, DOM transformations, and to create SVG files for inclusion in PDFs. I've seen it all over the web as well. The website has a bunch of examples and links to pages that have used it.

I recommend it because it's fairly cross browser compatible, has an active community, and is easy to learn. Take a look at the webpage and pay attention to the real world uses to see a small sample of what you can do with it.

share|improve this answer
1  
Some additional info could make this answer a lot higher quality. Name dropping a library isn't very helpful. When should D3 be used as opposed to other, simpler methods? – Zach Saucier Mar 10 at 19:07

The following are the possible ways to animate svg:

SVG SMIL ANIMATIONS

The SVG can be animated via its powerful native markup language, called SMIL, exported directly from animation tools like Adobe Animate CC+flash2svg plugin.

To animate an SVG with SMIL even on browsers lacking support, you just need to use a SMIL polyfill.

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.

The SMIL polyfill made by Eric Willigers does just that: it translates SMIL into Web Animations API that even the Microsoft browser supports. 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 exagerated. It’s more like a rebirth.

To use SMIL on all browsers, including IE and EDGE, you just need to add this javascript polyfill to your web page:

https://github.com/ericwilligers/svg-animation

Here is a demo page using the polyfill made by Tom Byrne, the author of the popular flash2svg exporter:

the page without the polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

and the same page with the polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

If you look at the source it is pretty much self-explanatory.

Also the performances with the polyfill are often better than the original SMIL, because on many browsers Web Animations is hardware accelerated, while SMIL is usually not.

EXPORT ANIMATIONS IN SVG SMIL

The simpler way to create SVG animations is to use tools like Adobe Animate CC to draw them and plugins like Flash2svg ( https://github.com/TomByrne/Flash2Svg ) to export them in SVG. With it you can export almost all animations+sound as a single SVG file, like this cartoon episode:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG ANIMATION JS LIBRARIES

The javascript way is more complicated. First of all you need to be a javascript programmer. Then you have to choose between many libraries. The more popular are:

  • SnapSVG http://snapsvg.io
    This library is the successor of the old and popular Raphael animation library made by the same author. Very stable, but it converts SVG in an internal format at runtime to animate it. Morphing options are also very basic, just linear interpolation. (NOTE: 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 one command and few bytes to do the same job).

  • Greensock MorphSVG
    http://greensock.com/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 Greenock SVGMorphing lib will automatically interpolate between the frames and create all the in-between frames for a smooth playback. Here is an example:
    http://codepen.io/Emasoft/pen/reOqYE

  • 3D Seen.js
    http://seenjs.io/demo-svg-canvas.html
    If you want to animate in 3D this library is very powerful.
    Seen.js renders 3D .obj files meshes in SVG and animates them very easily.

SVG IMAGES EDITORS

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

  • Inkscape : open source, has tons of features, its an advanced vector editing package made by people partecipating in the SVG Working Group. The reference for the SVG format. Not easy to learn.

  • Adobe Illustrator: commercial, very powerful vector drawing software, it offers many 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 school, and all graphicians know how to use it.

  • Affinity Designer: This is a commercial software like Illustrator, but with an excellent SVG compatibility, almost at the level of Inkscape. The UI is much more friendly, and it is now becoming very popular among SVG artists.

SVG ANIMATION EDITORS

Currently the only SVG animation editor is this:

  • 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: https://github.com/TomByrne/Flash2Svg

Or install it from Adobe Plugins panel: https://creative.adobe.com/addons/products/7232

Unfortunately Adobe Animate CC is commercial. There are free open source alternative animation applications, but I tried them all and they still suck IMHO. Let's hope for the future.

References:
My more exhaustive blog post on the subject: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

The case referenced about snap.svg: http://stackoverflow.com/questions/35727635/adobe-animate-snap-svg-plugin-huge-files

share|improve this answer
    
Some browsers also support using CSS to animate SVG elements. – bemdesign Mar 10 at 12:06
    
This answer is very opinionated and ignores a lot of what the top professionals working in web animation suggest. – Zach Saucier Mar 10 at 14:28
1  
Adobe Animate CC is far from the only SVG animating software – Zach Saucier Mar 10 at 14:34
1  
You don't have to use a JS library to animate a lot of SVGs. Your answer implies that they are required – Zach Saucier Mar 10 at 14:37
4  
Hey, its come to our attention that this is verbatim copied from the Reddit you linked, reddit.com/r/webdev/comments/4996ph/how_best_to_animate_svgs --- if this isn't you then you need to edit your answer to show its a quote. Or write the answer in your own words. – Ryan Mar 10 at 17:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.