Come si usa Modernizr per rilevare se gli sfondi CSS SVG sono supportati?

Question

Come la domanda dice come utilizzare Modernizr per rilevare se gli sfondi CSS SVG sono supportati?

.svg #example{} non è il modo corretto perché diversi browser hanno variegato supporto per i file svg.

Ad esempio Modernizr segnala che SVG è supportato in firefox 3.5, tuttavia i file SVG e CSS come immagini di sfondo NON sono supportati.

Answer 1

Che ne dici di una soluzione CSS pura? Posso confermare questo funziona con 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/

Oppure provare questo altro metodo:

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

Una possibilità è quella di utilizzare l'opzione Inline SVG in modernizzatore. Posso confermare che funziona in FF 3.6.14. Faresti sceglie "Inline SVG" come parte della vostra generazione modernizzatore, e in grado di gestire in CSS come:

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

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

o in JavaScript come:

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