Wie verwende ich Modernizr, um zu erkennen, ob SVG-CSS-Hintergründe unterstützt werden?

Question

Wie die Frage sagt, wie verwende ich Modernizr zu erkennen, ob wenn SVG CSS-Hintergründe unterstützt werden?

.svg #example{} ist nicht der richtige Weg, weil verschiedene Browser verschiedene Unterstützung für Svg-Dateien haben.

Zum Beispiel berichtet Modernizr, dass SVG in Firefox 3.5 unterstützt wird, aber SVG-Dateien und CSS als Hintergrundbilder werden NICHT unterstützt.

Answer 1

Wie wäre es mit einer reinen CSS-Lösung? Ich kann bestätigen, dass dies mit IE8 funktioniert.

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/

Oder versuchen, diese andere Methode:

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

Eine Option ist die Inline SVG Option in Modernisierer zu verwenden. Ich kann bestätigen, dass dies in FF 3.6.14 funktioniert. Sie würden "Inline SVG" als Teil Ihrer Modernisierer Build wählen, und es in CSS verwalten können wie:

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

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

oder in Javascript wie:

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