In a little experiment I’m working on I recently found a bit of a show-stopping problem. After an APB on Twitter I got a rapid reply which helped me solve it, but it seems that I may be the first person to encounter this error, therefore it’s encumbent on me to document it. So this is that.
For some time now, since Safari 6 and Chrome 18 were released, we’ve been able to use the
-webkit-filter CSS property to apply graphical filters to HTML content. But it seems that many people aren’t aware that you can also do this in Firefox and — within a very limited set of parameters — IE9 and above.
The reason for this is that all of these browsers support SVG filter effects, and CSS filter effects are basically shorthand functions that apply predefined configurations of SVG filters.
Using SVG for scalable icon sprites isn’t a new idea, but the technique required to use them is (as with all CSS spriting) a little verbose, needing multiple instances of
background-position. A feature from SVG1.1, Fragment Identifier Linking, makes it much easier, and will be available in the forthcoming Firefox 15.
With the release of IE9 and Firefox 4 all major browsers are going to support using SVG in the
img element or as a CSS background image, which is great news as SVG images are good for high definition, scalable websites. I’ve written a couple of posts recently about using SVG with the
background-image property, and how to cope with browsers that don’t support it. The method I came up with works, but is far from elegant; for one thing, it doesn’t allow for transparency.
My last post was about using SVG values for the
background-image property, and I pointed out one big problem with the technique:
The drawback of this is that it’s not ready for use just yet — browsers that don’t support SVG in
background-imagewill not provide any fallback, even if you supply another
background-imagevalue; so in non-supporting browsers, no image at all will be displayed.
While having a look through the list of features for developers planned for Firefox 4 earlier today, I noticed this:
You can now use SVG with the
imgelement, as well as the background image in CSS.
I know you can already use SVG in
background-image with Safari, Chrome and Opera, and this, coupled with Internet Explorer’s push towards SVG and the strong chance this will be available in IE9, made me decide to take a closer look.