css - Modernizr を使用して、SVG CSS 背景がサポートされているかどうかを検出するにはどうすればよいですか?

Question

質問にあるように、SVG CSS 背景がサポートされているかどうかを検出するために Modernizr を使用するにはどうすればよいですか?

.svg #example{}ブラウザによって svg ファイルのサポートが異なるため、これは正しい方法ではありません。

たとえば、Modernizr は、Firefox 3.5 で SVG がサポートされていると報告していますが、背景画像としての SVG ファイルと CSS はサポートされていません。

Answer 1

純粋なCSSソリューションはどうですか？これは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/

または、この他の方法を試してください。

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

1 つのオプションは、モダナイザーでインライン SVGオプションを使用することです。これは FF 3.6.14 で動作することを確認できます。モダナイザー ビルドの一部として「インライン SVG」を選択し、次のように CSS で管理できます。

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

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

または次のようなJavaScriptで：

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