Using SVG to make a lightweight Firefox 4 theme

To celebrate the release of Firefox 4, I've made available a demo persona using SVG images!

As far as I know, the official GetPersonas website doesn't yet accept SVG-backed personas, but thanks to dolske's recent blog post, I learned how to host an installable SVG-backed persona on my own web space.

So if you're running Firefox 4 (you are, right?), then go ahead and give my SVG-backed persona a try! Make sure to enable the Add-on bar ('View' menu | Toolbars | Add-on Bar) to get the full effect. I don't recommend leaving this persona applied for very long, though, lest its continuous animations feast on your CPU and battery. :)

I look forward to seeing even prettier SVG-backed personas from others whose design skills are far superior to mine!

SVG as an image

As of about a month ago, SVG files can now be used as images in Firefox 4.0 nightly builds! This will be included in the next Firefox 4.0 beta iteration (beta 7), when that's released.

This feature is exciting for many reasons:

• Better-scaling web graphics -- unlike raster images (e.g. JPEG/GIF/PNG), SVG images can be scaled up or down without pixellation. This makes SVG ideal for web developers who want their content to look crisp on giant projector-screens as well as tiny phone screens.
• SMIL animation in images -- SVG allows for very complex & expressive animations (see Brian Birtles' recent post for a number of great examples).
• Reduced web-developer frustration -- from an author's perspective, SVG is an image format, and it should Just Work in contexts that expect an image.
• Broader use of SVG!

For your viewing pleasure, here are some demos of SVG-as-an-image in a variety of situations:

• In the <img> tag:

• As a CSS background:
This is a div with a tiled SVG image as its background.
• In the HTML5 canvas element, with a rotation applied via the 2D canvas API:
• <---- And here, as a CSS list-style-image! (That's the SVG version of the W3C's SVG logo.)

As one last example, I hacked together a Firefox Persona using SMIL-animated SVG images as backgrounds for Firefox's toolbar & addon bar. I wasn't able to publish it to the GetPersonas site, because the uploader page there doesn't accept SVG images yet -- so instead, I've included a small screencast:

Click here to view full-size video

The SVG files used for backgrounds in this Persona are available here. The header SVG file makes use of a locally-saved copy of Marek Raida's excellent hourglass demo.

There are some bugs with this feature that I'm still working out -- for example, you may get pixellation at certain unlucky zoom-levels -- but that will be fixed for the final release. If you run into other issues, please file bugs! :)

Mozilla gets <animateMotion>!

Yesterday afternoon, I checked in support for the <animateMotion> SVG element, so that feature is supported in this morning's nightly build!

The <animateMotion> element allows for much more flexibility in SVG animations. Mozilla's nightly builds have supported animation of most SVG attributes and properties for a while now, but <animateMotion> gives authors the added ability to effortlessly animate an element to move along any arbitrary path.

I've written a simple Rocket Demo to give an example of the types of things you can do with this. This demo depicts the sad cartoony story of a rocket that gets hit by an asteroid, loses power to its boosters, and slowly falls into the sun. The demo uses no Javascript at all, and it uses <animateMotion> to define the motion-paths of all of the moving elements. I've tested the demo in Opera, Firefox-nightly, and Chromium nightly -- a few things don't work in Chromium, but it works great in the other two browsers. (Thanks to clker.com for some public-domain SVG clip art that I use in the demo.)

Marek Raida (a wizard of SVG demos, and the author of the "Cavern Fighter" game that I linked to a few posts back) has come up with two excellent <animateMotion> demos as well: "Drawing Animals" and "Catch the Mouse." Both are linked off of hist latest blog post. (Note: He's also got a fancier version of the "Catch the Mouse" demo where the mouse's footprints slowly disappear, but Firefox nightly builds are currently a bit choppy on that version, due to some code we should probably optimize for SMIL animation of CSS properties.)

SVG/SMIL "Dock" Demo

Today, I decided to see what what it'd be like to make an MacOS-style "dock" in SVG, using SMIL <animateTransform> elements to achieve the zooming hover effects.

Once I got that working, I felt like I really should make the icons do something useful when you click them. So, I hooked them up to control an embedded iframe.

Here's the result: SMIL Dock

Screenshot:


Screencast:


(Note that the demo will only do anything useful in a mozilla-central nightly build -- that is, Firefox 3.7 / Gecko 1.9.3 -- since earlier versions don't have support for SMIL.)

SVG Animation in Action: Marek Raida's "SVG Cavern Fighter" Game

Marek Raida has come up with another beautiful demo that shows off the power of SVG. This one's called SVG Cavern Fighter, and it's a classic side-scrolling shoot-em-up type game, with enemies and items that pulse and wiggle. The game logic is written in Javascript, and the enemy/item animations are all done with SMIL.

It looks really great (and it's quite fun to play) in mozilla-central nightly builds! (In earlier Firefox versions, with no SMIL support, the game logic still mostly works, but the enemies and items won't animate.)

Marek's been iterating on this game pretty rapidly, adding new features and fixing bugs every few days. His latest version will always be linked from his blog. Give it a try, and send him any feedback that you might have!

SMIL enabled by default on nightly builds!

Good news: SVG Animation (SMIL) support is now enabled by default in mozilla-central nightly builds!

SMIL support has actually been built into our nightlies for some time now, but until last week, it was turned off by default, using an about:config preference. But we're confident that it will be ready to ship in Firefox 3.7 and that it's stable enough for our nightly testers to give it a spin, so we've flipped the switch!

Brian Birtles has a nice status page, documenting what currently works and what's not yet supported.

In particular, SMIL animation now works for most SVG-recognized CSS properties. Colors, numeric values like opacities & lengths, and enumerated values should all work, and I'm working on remaining types (see below). With support for CSS properties, we can make much prettier animations now, with flashing colors and fade-in using opacity -- for example, this simple demo.

Marek Raida has some fun demos on his blog, too -- I especially like the 'good spirit' animation and the 'digging' animation (which requires scripting for handling mouse events).

Here's what's on the immediate roadmap for people working on SMIL:

• dholbert: Finish off support for CSS properties (bug 520239, bug 520487, bug 520488)


• jwatt: Support more SVG properties (e.g. bug 522267)


• birtles: Support syncbase timing - that is, animations whose start/end times are dependent on other animations. (bug 474743)

So, play away! I'm looking forward to feedback from nightly testers.

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