将SVG图像转换为不支持的浏览器的png - Fallback - modernizer.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及以下版本.我可以使用有完整的浏览器支持表.

谢谢克里斯!