: SVG in CSS backgrounds 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

@Rambettina238

Posted in: #Css #Images #Plugin #Referrer #Svg

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: 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: tutorials.jenkov.com/svg/displaying-svg-in-web-browsers.html

Vote Up Vote Down

Login to post a comment!