将不支持的浏览器的SVG图像转换为png-Fallback-modernizer.js(?) [英] Turning SVG image into png for unsupported browsers - Fallback - modernizer.js(?)
问题描述
我正在考虑将一些我在网站上的SVG图像放在PNG中，用于不正确支持SVG的浏览器.我主要遇到的问题是IE中显示的基于文本的文本(显示的字体完全错误)，所以我想我会创建一个PNG的后备广告.
I'm looking at turning a few SVG images I have on my site in PNG for browsers that don't support SVG properly. I'm mostly having issues with the text based ones being shown in IE (completely wrong font being displayed), so I thought I'd create a fallback to PNG.
我已经尝试为此寻找一个不错的演练(我是一个自认是菜鸟的人)，但我还没有设法使其全部正常工作.我相信我想使用 modernizer.js 来检查兼容性，然后在不兼容的其他图像中投放(?)
I've tried look for a nice walkthrough for this (I'm a self confessed noob) and I haven't managed to make it all work yet. I believe I want to use modernizer.js to check for compatibility, then serve in incompatible different images(?)
推荐答案
Chris Coyier answers this exact question in the latest Smashing Magazine CSS Q&A.
- 下载 Modernizr 的版本，该版本已精简为仅用于测试 SVG(假设这是您所需的唯一测试).
- 运行测试.如果它 通过，放入SVG.如果失败，则放入位图.本质上:
- Download a version of Modernizr that is trimmed down to just testing SVG (assuming that’s the only test you need).
- Run the test. If it passes, put in the SVG. If it fails, put in the bitmap. Essentially:
示例(JS解决方案):
Example (JS solution):
if (!Modernizr.svg) {
$("#logo").css("background-image", "url(fallback.png)");
}
示例(CSS解决方案):
Example (CSS solution):
.no-svg #logo { background-image: url(fallback.png); }
这仅对于IE8及以下版本才是必需的. 我可以使用有一个完整的浏览器支持表.
This should only be necessary for IE8 and below. Can I use has a full table of browser support.
谢谢克里斯！
这篇关于将不支持的浏览器的SVG图像转换为png-Fallback-modernizer.js(?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
