How to detect if SVG animation is available

Question

Is there a good way to detect if SVG animation is available, and then adjust the DOM appropriately?

I'm using animateMotion to animate the motion of a g containing images. This only works in Mozilla; even worse, having the animateMotion unstarted leaves the images in a different position in both Mozilla and WebKit (but not the same place in each!).

It seems I need a way to adjust the properties on the g and images to deal with each scenario, and to add the animateMotion tag only if it would work. Any suggestions?

Answer 1

I just had this issue with a Samsung phone running Android 4.2.2. It would report true for all three of these: Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil but no animation and the clip-paths where messed up. It looked like only one element could have a clip-path. Anyway, we ended with this not-so-great resolution:

isAndroid = /Android/.test( navigator.userAgent );

Sorry, android users, you'll only see the backup image. This is a horrible fix but it was only for a simple logo animation so...

Answer 2

Modernizr detects only high level feature existence and trusts the browser not to lie. Desktop Safari, for example, has a big "Yes" for SMIL from Modernizr. But SMIL is only partly implemented in pretty much every browser (even Firefox 4!), and you have to test each individual attribute animation to figure out exactly which one is working or not.

For example, you can't animate the startOffset for text on a path animation in Desktop Safari using SMIL. There is no library that detects feature existence for things like this.

IMHO, where they exist you should use CSS transforms/animations for general purpose animation on everything other than IE. For IE, use Javascript (or Canvas) animations.

(BTW, animateTransform on Chrome is broken - it miscalculates the translations)

Answer 3

Modernizr detects support for SVG animation (SMIL).

Without the complete example it's impossible to say for sure what's causing the differences.