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.
Using background: black url("svg"); would have prevented the white on white, wouldn’t it?
Robbert: yes it would. It also would “show through” on Opera. The net effect would be a black rectangle with rounded corners placed on top of a black rectangle with square corners: in other words, a rectangular black background.
The issue of multiple backgrounds is partially addressed in CSS3 [link]
However, it is indeed still not a perfect way to specify a fallback, because browsers understanding SVG might still load the fallback content too (expect if they implement some optimisation strategies: "Implementations may optimize by not downloading and drawing images that are not visible").
Could HTTP content negotiation provide a fallback mechanism? If major browsers declare their SVG support using content negotiation, an http://example.com/img/background URI could yield background.svg if the user agent supports SVG and background.png otherwise.
Like Joe Gregorio, I’m not a big fan of content negotiation.
None of the headers Opera currently sends specifically indicate that they support SVG. In fact, the current accept header they send indicate that they would prefer a number of non-vector graphic formats:
In this case, the situation is a bit more nuanced. What I am seeking is rounded corners: and it is my expectation that Opera will someday support the CSS border-radius attribute, but currently they do not. Since they do not support border-radius, but do support background images in SVG, I’m trying that. While they do support background images with SVG, this support does not yet appear to be fully optimized, resulting in jerky scrolling — and I’m still mulling over whether or not to enable it by default. By simplifying the SVG images a bit, I’ve gotten it to the point where it is tolerable, and I’ve tentatively enabled it if window.opera is set. I’m still not rounding the entry fields or buttons (e.g., on my comment form) for Opera, but will revisit this once (I’m convinced that this is not an if, but a when) Opera supports border radius.
mbrubeck on New HTML5 parser coming in Firefox 4 – SVG in HTML, faster parsing, and more
No, Opera supports SVG in XHTML, just like Firefox 3.6 and other browsers. This is about SVG in HTML, which is possible in existing browsers (including Opera) only with [special...
