SVG in CSS backgrounds

Question

Edit:

How can I detect in php if the client browser is capable of displaying SVG as CSS background ?

I renamed my stylesheet from .css to .css.php. So I can include at the beginning:

<?php
header("content-type: text/css");
?>

and somewhere in the middle

<?php
 if (stristr($_SERVER["HTTP_ACCEPT"], "image/xml+svg"))
 {
 }
 else
 {
 }
?>

Unfortunately, my firefox client does not send out any image/xml+svg string to the server. So, how can I detect if a browser is capable of displaying SVG as CSS background in php ?

Ref: http://www.gabis-bloghaeuschen.de/2006/03/27/php-code-in-der-css-datei/

End Edit.

---

I experienced (except the few most recent webbrowser) not much of any other webbrowser is capable of displaying an .svg image from withing a .css with the aid of url().

Using the embed tag and its pluginspage attribute, there is the possibility to refer a client to a missing plugin:

<embed src="/svg/simple-example-1.jsp"
       width="300" height="220"
       type="image/svg+xml"
       pluginspage="http://www.adobe.com/svg/viewer/install/" />

Since the adobe plugin is outdated, one can also refer to the corel svg viewer.

What is the best strategy to deal with old browsers ? Is there a mechanism to refer them to a plugin if the .svg image is included from within a .css ?

edit:

#header {
 width: 760px;
 height: 288px;
 margin: 0 auto;
 background: url(images/background.svg) no-repeat right top;
}

How to refer browsers, not able to handle the code above, at least to third party aid, e.g. a plugin ? (Or maybe a .png - but actually, that is not what I want.)

What other possibilities are there to deal with browsers that can't handle svg in stylesheet ?

Iceweasel is able to display background.svg directly but can't display the image if included by style - so apprently it is able to handle svg, but not from within a stylesheet ?

With browsershots I realized, most browsers were not displaying the image in the stylesheet because of it being in Scalable Vector Graphics AND in the stylesheet. So the question is, what is the best strategy here to reach as much viewers as possible with the svg and only use the raster images in emergency ?

Ref: http://tutorials.jenkov.com/svg/displaying-svg-in-web-browsers.html

Answer 1

Backgrounds are meant to be backgrounds. They're not meant to support interaction.

Your options would seem to be:

1. Do it in HTML rather than CSS.

2. Have your server return different content according to the User-Agent string.

3. If your SVG is rectangular and opaque, you can do fallbacks as

background-image: url(fallback.png);
background-image: none, url(real.svg), url(fallback.png);

4. Forget about Firefox pre-v4 and IE pre-v9. (ref)

5. Use Modernizr and use inlinesvg as a proxy for support for SVG backgrounds. (Note: this doesn't require two versions of the site: just a JS dependency and an extra line of CSS).

6. There may be some approach using JavaScript to provide a more complex fallback.