将SVG图像转换为不支持的浏览器的png - Fallback - modernizr.js（？）

Question

我正在考虑在SVG上为我的网站上的一些PNG图片播放不适合SVG的浏览器。我主要是在IE中显示基于文本的问题（显示完全错误的字体），所以我认为我会创建一个回退到PNG。

我已经尝试过为此寻找一个很好的演练（我是一个自认不起的菜鸟），但我还没有成功完成所有工作。我相信我想使用modernizer.js检查兼容性，然后在不兼容的不同图像中投放（？）

Answer 1

Chris Coyier在最新的Smashing Magazine CSS Q&A中回答了这个问题。

1. 下载 Modernizr 版本，该版本已经过修剪，只是测试 SVG（假设这是您需要的唯一测试）。
2. 运行测试。如果它 传递，放入SVG。如果失败，请输入位图。基本上：

示例（JS解决方案）：

if (!Modernizr.svg) {
    $("#logo").css("background-image", "url(fallback.png)");
}

示例（CSS解决方案）：

.no-svg #logo { background-image: url(fallback.png); }

这仅适用于IE8及以下版本。 我可以使用有full table of browser support。

谢谢Chris！