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

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 部署的，因此我可以在提供页面之前检查用户代理字符串，并根据我认为它是否支持 SVG 来指定 img 源。但这也有一个潜在的问题，即我不确信自己能做出正确的决定。

对图像进行 SVG 处理的首选方法是什么？

Answer 1

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

1. 下载 Modernizr 的版本，该版本被精简为仅测试 SVG（假设是 ）

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

   if (!Modernizr.svg) { 
       $("#logo").css("背景图片", "url(fallback.png)"); 
   }
   

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

注意：浏览器不会同时加载（png 和 svg）版本。

郑重声明：如果您必须支持 IE 8 及以下版本或较旧的 Android，那么这就是您现在需要 SVG 后备的唯一原因。

Answer 2

我不会将其称为首选方式，但如果您想追求第二种选择，这应该检测 SVG 支持（来自 Raphaël 1.5.2）：

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

Raphaël 使用它来确定是否应该使用 VML（IE）或 SVG（其他）进行渲染。

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

Answer 3

要解决在对象标签中调整 SVG 大小的问题：

将“preserveAspectRatio”和“viewBox”属性添加到 svg 标记。在文本编辑器中打开文件并找到标签。在该标记中，添加以下属性：

<块引用>

preserveAspectRatio="xMinYMin meet" viewBox="0 0 {width} {height}"

将 {width} 和 {height} 替换为 viewBox 的一些默认值。我使用 SVG 标签的“宽度”和“高度”属性中的值。保存 SVG，它现在应该按预期缩放。

请参阅：我该如何缩放嵌入了

对象标签中的 SVG 存在的问题是它们会吞噬点击次数。

SVG 作为带有 PNG 后备的背景图像： http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/

我最喜欢的是使用 img 标签和onerror 处理程序将 src 标签更改为 PNG。

另一个很好的资源：http://www.schepers.cc/svg/blendups/embedding。 html

Answer 4

你唯一需要的是CSS。首先，将后备图像声明为背景图像。然后您可以使用多个背景来添加SVG。

IE8及以下版本将忽略第二个background-image声明，因为缺乏对多个背景的支持。

顺便说一句，我在这里使用 img 元素，因为徽标是内容，而不是布局。在这种情况下使用背景图像可能看起来是错误的，但我不同意。您将获得世界上最好的：SVG 徽标，后备

HTML：

<a href="/" class="site-logo">
    <!-- base64 encoded 1x1 px big transparent gif -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="company logo">
</a>

CSS（使用多个背景图像）：

caniuse：多个背景< /a>

• PNG 适用于 IE <9、FF <3.6、Opera <10.5
• SVG 适用于所有其他支持 SVG 的
• Android 2.x 不会有 PNG 或 SVG，因为这些版本实际上支持多个背景，但不支持SVG
• 的浏览器，只有一个 HTTP 请求

.site-logo > img {
    /* Dimensions of your image need to be set */
    width: 32px;
    height: 32px;

    /* Fallback for <IE9 */
    background-image: url(logo.png);

    /* multiple backgrounds are ignored by <IE9 */
    background-image: url(logo.svg), none;
}

对于支持 SVG CSS（使用线性渐变）

： caniuse ：CSS 渐变

• PNG 适用于 IE <10、FF <3.6、Safari <4.0、Opera <11.1、Opera Mini、Opera Mobile <11.1
• SVG 适用于所有其他支持 SVG 的设备（如果供应商前缀为指定）
• 忽略 webkit 的旧渐变语法会使 Android 2.x 使用 PNG 后备

.site-logo > img {
    /* Dimensions of your image need to be set */
    width: 32px;
    height: 32px;

    background: transparent url(logo.png) center center no-repeat;
    background-image: -webkit-linear-gradient(transparent, transparent), url(logo.svg);
    background-image:         linear-gradient(transparent, transparent), url(logo.svg);
}

Answer 5

尝试 svg-web 他们有多种不同的方式来显示 svg 图像，包括带有自动回退功能的 Flash 。

Answer 6

我发现的将 SVG 包含为 HTML 元素（带回退）的最佳方法是：

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" style="width: 100px; height: 100px; vertical-align: top;">
    <image xlink:href="image.svg" src="fallback.png" width="100%" height="100%"/>
</svg> 

优点：

• 在我测试过的每个设备/浏览器（IE6-IE11、Android 2.0+、IOS3-）中提供回退7)
• 每个测试浏览器仅加载一张图像（IE9-IE11 除外）
• 外部加载的图像允许缓存图像

缺点：

• 无法在 IE9-IE11 中用作可缩放（响应式）图像（查看此问题）
• IE9-IE11 加载两个图像
• IOS3- 4（Mobile Safari）具有 SVG 支持，但显示 PNG（因为它缺乏内联 SVG 支持）
• SVG 文件不得具有高度/宽度属性（对此不确定，但已在某处读过，在我的测试中，我的 SVG 没有它们）无论如何）
• 不验证

请提供评论以及您能想到的其他优点/缺点。我知道 SVG 在某些浏览器中可能会出现像素化，但由于使用 browserstack 进行模拟，我无法测试放大效果。

来源：http://lynn.ru/examples/svg/en.html