intertwingly

Erik Dahlström: something like “.footer { background: url(my.svg); }"

Eric uses this technique on his site, unfortunately this demonstrates a limitation in the ability of CSS to define fallbacks for browsers which do not support SVG as background images — Firefox and Chrome, for example, show white text on a white background.

I’ve implemented this on my web site (you may need to hit refresh to load the latest JS and CSS files), but instead of browser sniffing, I sniff the URI.  If the query part of the URI contains the string "bgsvg”, I will replace various backgrounds with SVG images: article, aside and h2, with the latter slightly more fancy to demonstrate what is possible in SVG.

At the moment, it looks like there might be some slight negative performance ramifications for doing this with Opera, so I am not enabling it by default for Opera users just yet.