具有PNG后备的浏览器中的图像的SVG

Question

我想在网站上使用公司徽标的SVG版本.目前,主流浏览器的所有当前版本(IE,Safari,Chrome,Firefox,Opera)都支持SVG,所以这看起来并不疯狂.但是,旧的浏览器仍然存在,所以我需要回到PNG支持.

显而易见的解决方案是将SVG内容放在这样的object标签中(原谅内联样式......):

<object data='logo.svg' style='height:3em' >
    <img src='logo.png' style='height:3em' />
</object>

理论上应该在object可能的情况下渲染,或者渲染img.但是,Chrome不喜欢这样并且将height样式应用于对象本身而不是SVG,因此我最终得到了一个带有滚动条的iframe类似框,显示了一个巨大的徽标.

另一个解决方案是使用PNG作为img源,然后在渲染时将其与带有javascript的SVG源交换出来,如果我认为我在支持SVG的浏览器上运行的话.这并不理想,因为PNG仍然会被下载,而且我不是知己,我可以正确检测SVG支持.不幸的是,jQuery似乎没有SVG检测功能.

最后,由于我的网站使用ASP.NET部署,我可以在提供页面之前检查用户代理字符串,并img根据我是否认为它将支持SVG来指定源.但这也有潜在的问题,我不是知己,我可以做出正确的决定.

为图像做SVG的首选方法是什么？

Answer 1

这是一个老问题,但这是另一个解决方案:

1. 下载一个版本的Modernizr,它被修剪为仅测试SVG(假设这是您需要的唯一测试).

2. 运行测试.如果通过,请输入SVG.如果失败,请输入位图.实质上:

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

SVG是Modernizr的完美用例,因为没有简单的本机方式来提供回退.

注意:浏览器不加载(png和svg)版本.

为了记录:如果你必须支持IE 8及更低版本或更旧的Android,这些天你需要回退SVG的唯一原因.

Answer 2

我不会将其称为首选方式，但如果您想采用第二个选项，这应该检测 SVG 支持（来自Rapha\xc3\xabl 1.5.2）：

\n\n

if(window.SVGAngle || \n    document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") {\n    // supports SVG\nelse {\n    // no SVG\n}\n

\n\n

Rapha\xc3\xabl 使用它来确定是否应该使用 VML (IE) 还是 SVG（其他）进行渲染。

\n\n

出于好奇，为什么您的徽标采用 SVG 格式？如果您已经有 PNG 版本，这似乎需要大量工作。

\n