I want to believe. SVG as an image format.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.

I want to believe. SVG as an image format.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.

I want to believe. SVG as an image format.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?

§926 · September 10, 2010 · Software, SVG, Technology, Web · Tags: , , · [Print]

10 Comments to “New Shit Has Come To Light”

  1. David says:

    Great post, Jeff!

  2. Erik says:

    Yes, Doug should know about this issue*. Would be nice if we could get a proper definition for this into the SVG integration spec. I think missing intrinsic size is fine, as long as there’s a viewBox.

    *) http://www.w3.org/Graphics/SVG/WG/track/issues/2258

  3. Alex says:

    It’s great to see support for this finally coming in Firefox (and IE to boot), there are still loads of bugs and issues with all of the implementations, but having these implementations will help sort those issues out.

  4. AWESOME! SVG seriously needs to be treated just like GIF/JPG/PNG image formats when it comes to being able to display them in web pages. I took the extra three minutes (would have been 1 on XP but Windows 7 sucks hard core) to test this page out in IE9 and yes the images work fine in IE9. 🙂

  5. Hmmm…. I’m using Firefox 4.0b6, and I still don’t see SVG images on your blog. 🙁

    Isn’t it activated by default?

  6. Hm, that’s odd François. Can you download the latest Minefield Nightly and tell me if you see it?

  7. nemo says:

    Not only that, in my personal testing, Firefox appeared to have the best implementation of it 🙂

    http://m8y.org/tmp/testcase198.xhtml
    (a crude test of some SVG “animations”)

    All browsers correctly block javascript. But FF allowed animated SVG backgrounds – similar to -moz-element.

    IE9 did not render the middle test. Opera did not render the last two (!).

    Latest webkit, safari, and chrome all rendered the last 2 statically, for some reason, safari and chrome and IE9 all render the last one, differently.

  8. I did not succeed in installing Nightly Firefox (I used portableapps, but did not work).

    But, I read this, which explains that only the future beta 7 of firefox works, not beta 6: http://blog.dholbert.org/2010/10/svg-as-image.html

  9. nemo says:

    Oh. And opera also had a rendering bug, scrolling caused tearing in the first SVG image that it did manage to render.

  10. Using Firefox 4 beta 7, on Vista, I can see SVG images. 🙂