New Shit Has Come To Light

Those wacky Mozilla guys just fixed a bug I've been waiting years for: They now support SVG in <img> tags (and in most image contexts, for example background-image). This will be available in Firefox 4 Beta 6 and beyond (or download a nightly).

See SVG really has two roles on the web scene: as document and as image. For a long time I've been really excited about SVG-as-a-document because web documents have a DOM, are scriptable, can be styled, have semantics - that goody bag is really stuffed. I've been less excited about SVG-as-an-image because frankly it hardly worked anywhere and I had no prospect of the situation improving. Now that Firefox is finally onboard and IE9 is waiting in the wings we are about to embark on a new era of capabilities for the web that we can begin to rely on in less than a year.

Why is it important?

For one, SVG-as-an-image means that your images scale perfectly at any screen resolution. This will generally mean crisper images than their uncouth raster cousins with no lossiness.

For two, SVG images can be smaller in size than their equivalent raster counterpart (especially when gzipped). This is dependent upon the level of detail you've put into the image and the tools that produced the image. Tav just published an article about how to improve this and I've talked long about scour in the past too. Keep up, will ya?

So SVG images can look better and have fewer bytes than their raster counterparts. Booyahs all the way around.

And they can go a lot more places than the <object> tag. Feed readers, for one.

Of course there are challenges:

• Not ubiquitous. Yet. We have to wait at least a year or more for that to be the case on the desktop but now there is definite momentum. Android appears to be the only holdout on the mobile web side and it's being looked at. Let's circle back in a year, mkay?
• Performance? SVG images have more capabilities than a standard raster image (declarative animation, external styling) so I would suspect SVG images require more juice to display. Rob and others talked about SVG performance at this year's SVG Open. Frankly I suspect that things can be done on the browser side to optimize this case, so I look forward to learning more when you comment on my blog 🙂
• Lot of crufty SVG out there. This situation is improving too over time.
• Some SVGs don't have an intrinsic size (gee I hope I'm using this term right) and most things expect an image to have a size. PNG files contain their width/height in the bytes of the file header. The width/height values on <svg> elements default to 100%/100%. Some browsers have a problem with this (ok, WebKit mostly). If you want to use SVG files as images, I suggest you start fixing WebKit bugs (or update your SVG files to have an explicit width/height). Can someone (Doug? Fantasai?) clarify what is supposed to happen if an SVG file has width/height at 100% and the <img> tag does not specify a width/height?
• Not a lot of software/services accept SVG as an image type yet. I'm looking straight at you to help me change this.

So my take is that we're at about 15% of web users who can actually see SVG images (as compared to about 40% of web users that can see SVG documents). Since I'm such a SVG fascist fan I've decided to change my WordPress clipart quicktag to use <img> instead of <object>. This means that a lot of you Firefox users won't be able to see my blog clipart and for that I apologize up-front. Come back and read it when you're using Firefox 4?