Level of SVG SMIL (animation) support among the browsers

Question

Does anyone know the current state of SVG SMIL animation support in the popular browsers? It looks like Safari, Chrome, and Opera support it. Firefox has confusing reports in their dev pages about SMIL support having been added, but I don't see it as of v3.6:

https://bugzilla.mozilla.org/show_bug.cgi?id=216462

I am ignoring IE since they don't even support SVG at all, and probably never will, much less SMIL.

The other thing - just comparing this test page between Safari, Chrome, and Opera:

http://srufaculty.sru.edu/david.dailey/svg/ovaling.svg

looks like Opera is the only one that renders it correctly. Should we not be using SMIL - kind of looks half-baked in all the browsers (sadly)? Blast.

Thanks

Vic

Your test animation seems to work in Chromium.. – Harass

SMIL is supported natively (though not SVG, as far as I know) in IE, so don't be so fast to discount it. – Varietal

Answer 1

http://www.codedread.com/svg-support.php has a rough comparison, and mentions SMIL in Firefox starting version 3.7. About IE, maybe Wednesday changes everything, see: live.visitmix.com/MIX10/Sessions/EX30

Hemstitch

Answer 2

Gecko's limitations are:

• no <animateColor> — not planned
• no wallclock timing — not planned
• animation of transform lists is inefficient/incomplete — should be fixed by about Dec 2011
• excessive CPU use — some improvements should be available by about Dec 2011

Other than that, I suspect that Gecko is the most spec-conformant of the major browsers. (In particular try some of the following tests with other browsers: http://mxr.mozilla.org/mozilla-central/source/layout/reftests/svg/smil/syncbase/)

It does fire DOM events and always has (in fact, this is one of the causes for slow performance). However, as required by the SMIL specification, DOM events are not fired during a seek.

Unlike other browsers, it fully supports animation sandwich priorities for syncbase timing, it provides correct behaviour for frozen to-animation and many other areas not supported in other browsers.

Accuse

Answer 3

An up to date overview of current browser support is found on http://caniuse.com/svg-smil

Currently (21-okt-2012), all major desktop and mobile browsers has at least partial support for svg-smil with the notable exception of IE9.

Adria

Answer 4

There is no SMIL at all in Firefox 3.6. IE 9 will do SVG, but it won't do SMIL. Microsoft believes that there are spec issues to work out before they add SMIL - and to a degree they are right, IMO. How SMIL will interact with other animations is currently an unresolved issue.

I just looked at that ovaling.svg demo again in Firefox 4 nightly (roughly at beta 2 stage) on Linux. It did drain my CPU to 77 %, whereas Opera only used 44 %. Or put differently, Opera 10.60 only used one of my two CPU-cores, Firefox used 1 and a half. The animation was really smooth in Firefox but did stutter a bit in Opera.

On my Thinkpad z61p running Linux, I do not think Firefox does any GPU acceleration (yet), but when that kicks in I suppose the CPU load would be a lot less.

Chrome 5 fails miserably. The animation won't run in any really useful way at all.

Halie

Answer 5

In my very short experience Opera's support is most complete and correct (I've played with different kinds of animation timings and behaviours and haven't noticed any bugs. Opera is the only one that fires DOM events when animations start/repeat/end).

Gecko is OK, although it doesn't fire events, and misinterpreted few more complex animations.

WebKit is the worst. Animations must have both from and to, otherwise it's easy to find bugs in additive/accumulative animations (animation state isn't reset properly or resets to wrong state). Removing animation node from DOM doesn't reset position of animated elements. It seems to have overly simplified tracking of animation state. I've managed to crash Mobile Safari.

Animation speed—at least on desktop OS X—seems to be in the same league, although animation in Opera seems to be a little less smooth than in others.

Loki

Answer 6

At the moment, the answer is very clear to me (I've only bothered testing with these three):

1. Opera
2. Firefox
3. Chrome

Opera is the only browser that can handle my game at the moment. The other two seem to lack quite basic support for my yet quite simple animations and dom manipulation of animations. However, I haven't spent more than an hour on cross browser compatibility work yet.

I'm doing kind of a proof of concept for only using on SVG 1.1 Full and SMIL animations in a game (no js animation at all). What I've tested (successfully in Opera) so far is:

• motion along a path with quadratic and cubic beziers (and continuations with 's' and 't' elements)
• changes to path during motion
• collision detection along a path and "radar vision" using SVGSVGElement.getIntersectionList samples
• zoom and pan on a g element representing the game world
• detecting hits on certain graphical elements of an actor
• dynamic speed control

Barton

I just realized that hit detection using getIntersectionList can only be used when detecting hits on elements that are actually rendered on the screen at the moment. This makes the function quite useless in my case. Currently I cross my fingers for finding som other easy way of doing hit detection. – Barton