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:
- 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! :)