Friday, January 16, 2009

SVG Animation (SMIL) support has landed!

Great news: support for SVG Animation (using SMIL) has now landed in mozilla-central! Zbigniew Braniecki has posted a nice summary of the history of this feature's development at Mozilla.

Great thanks to Brian Birtles for his excellent work on this patch (both in its early days and also during his Mozilla internship thus far), to Robert O'Callahan for his very thorough code-reviews, to Tim Rowley for keeping the patch up-to-date for so long, to Chris Double for his work on fixing crashes & adding features, and to Jeff Schiller for his moral support and patch-testing!

Now that SMIL has landed...
  • We can do really sweet animations directly in the browser, without any Javascript or Flash required. :)
  • We have improved support for the SVG specification
  • We win two more points on the Acid3 Test (in smil-enabled builds) for a total score of 95.
A few caveats:
  • This is mostly an initial framework for us to build upon, so it's still missing a number of key features (which will enable yet-more-awesome animations).
  • By default, the SMIL code is disabled via a build-time flag (see Bug 473705), so it's not included in nightly builds yet. (That will hopefully change as soon as we've got an about:config flag set up.)
For anyone interested in trying this out, give the tryserver build a spin! Or, if you compile your own builds, you can enable SMIL by adding "ac_add_options --enable-smil" to your .mozconfig file.

On my list of things to fix soon:
  • Bug 473904: Add an about:config toggle SMIL support
  • Bug 474049: Add support for animating CSS properties


Brad Neuberg said...

Congrats! It is exciting to see SMIL land.

Anonymous said...

Cool stuff - looks like animateTransform and the SVGAnimationElement interface patches have been pushed. Tryserver build? :)

Jeff Schiller said...

Silly Google/Blogger. I tried to use my OpenID URL and look what it gets me :P

Daniel said...

@Brad: Thanks!

Here's a TryServer build with animateTransform support. Once you've got that, here's a sample animateTransform animation.