asp.net - 具有 PNG 后备功能的浏览器中用于图像的 SVG

Question

我想在网站上使用公司 Logo 的 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 的小框，显示一个巨大的 Logo 。

另一种解决方案是使用 PNG 作为 img 源，然后在渲染时使用 javascript 将其与 SVG 源交换，如果我认为我在支持 SVG 的设备上运行浏览器。这并不理想，因为 PNG 仍会被下载，而且我不确定我能否正确检测到 SVG 支持。不幸的是，jQuery 似乎没有 SVG 检测功能。

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

为图像制作 SVG 的首选方式是什么？

Answer 1

这是一个老问题，但这里有另一个解决方案:

1. 下载 Modernizr 的一个版本已精简为仅测试 SVG(假设这是您唯一需要的测试)。

2. 运行测试。如果通过，请放入 SVG。如果失败，放入位图。本质上:

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

SVG 是 Modernizr 的完美用例，因为没有简单的 native 方法来提供后备。

注意:浏览器不会同时加载(png 和 svg)版本。

郑重声明:如果您必须支持 IE 8 及更低版本，或者更早的 Android，那么您现在需要回退 SVG 的唯一原因。