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.)