asp.net – SVG的图像在浏览器与PNG后备

发布时间：2020-12-15 18:56:11 所属栏目：asp.Net 来源：网络整理

导读：我想在网站上使用公司标志的SVG版本。目前，所有当前版本的主要浏览器(IE，Safari，Chrome，Firefox，Opera)都支持SVG，所以这似乎并不疯狂。然而，旧的浏览器仍然存在，所以我需要回到PNG支持。显而易见的解决方案是将SVG内容放在一个对象标签中，像这样(

我想在网站上使用公司标志的SVG版本。目前，所有当前版本的主要浏览器(IE，Safari，Chrome，Firefox，Opera)都支持SVG，所以这似乎并不疯狂。然而，旧的浏览器仍然存在，所以我需要回到PNG支持。

显而易见的解决方案是将SVG内容放在一个对象标签中，像这样(原始的内联样式…)：

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

这在理论上应该渲染的对象，如果可能的话，否则渲染img。但是，Chrome不喜欢这种方式，并将高度样式应用到对象本身，而不是SVG，所以我最终得到一个类似iframe的盒子，滚动条，显示一个巨大的标志。

另一个解决方案是使用PNG作为img源，然后在渲染时使用JavaScript的SVG源将其交换，如果我认为我在支持SVG的浏览器上运行。这不是理想的，因为PNG仍然会下载，我不知道我可以正确检测SVG支持。不幸的是，jQuery似乎没有SVG检测功能。

最后，由于我的网站与ASP.NET一起部署，我可以在服务页面之前检查用户代理字符串，并指定img源，具体取决于我是否支持SVG。但这也有潜在的问题，我不信任我可以做正确的电话。

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

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

>下载一个Modernizr的版本，修剪下来只是测试SVG(假设这是你需要的唯一的测试)。
>运行测试。如果它通过，放入SVG。如果失败，请放入位图。基本上：

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

SVG是Modernizr的完美用例，因为没有简单的本地方式提供回退。

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

对于记录：唯一的原因，你会需要一个回退SVG这些天，如果你必须支持IE 8和下来，或较旧的Android。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!