How do I use Modernizr to detect whether if SVG CSS backgrounds are supported?

Question

As the question says how do I use Modernizr to detect whether if SVG CSS backgrounds are supported?

.svg #example{} is not the correct way because different browsers have varied support for svg files.

For example Modernizr reports SVG to be supported in firefox 3.5 however SVG files and CSS as background images ARE NOT supported.

Answer 1

How about a pure CSS solution? I can confirm this works with IE8.

E {
background-image:  url('image.png');
background-image:  none, url('image.svg'), url('image.png');
background-size: 100% 100%;
}

http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/

Or try this other method:

E {
background: transparent url(fallback-image.png) center center no-repeat;
background-image: linear-gradient(transparent, transparent), url(vector-image.svg);
}

http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

Answer 2

One option is to use the Inline SVG option in modernizer. I can confirm this works in FF 3.6.14. You'd choose "Inline SVG" as part of your modernizer build, and can manage it in CSS like:

.logo {
    background: url(mahimage.svg);
    ...
}

.no-inlinesvg .logo {
    background: url(mahimage.png);
    ...
}

or in javascript like:

if (Modernizr.inlinesvg) {
    ...
}
else {
    ....
}