html - 支持 SVG 的浏览器是否会忽略替代图像（当包含在对象标签中时）？

Question

我想在网站中包含的插图在 SVG 格式中比保存为 PNG 的相同插图小 28.1 倍。

不幸的是，我必须迎合不支持 SVG 的浏览器。所以我仍然将PNG作为替代方案，如下所示：

<object type="image/svg+xml" data="illustration.svg">
  <img src="illustration.png" alt="alternate description">
</object>

在这种情况下，启用 SVG 的浏览器会忽略 PNG，还是会以某种方式在后台加载？（即我是否节省了整体加载时间？）

Answer 1

Firefox v4 和 Chrome v10 都下载备用图像。使用带有 PNG 后备的 SVG 图像不会节省任何带宽或加载时间。

通过加载此页面并查看 Firebug 和 Chrome 的开发者工具中的 Net 面板进行测试：

请注意，这并不意味着使用 SVG 不是一个好主意。您仍应使用 SVG，因为它的打印和缩放比相应的 PNG 更好。

Answer 2

我使用了类似的东西：

<object type="image/svg+xml" data="...">
   <!--[if lt IE 9]>
   <img src="img/circle.png" alt="" />
   <![endif]-->
</object>

Internet Explorer < 9 无法显示 SVG，因此它获取 PNG。几乎所有其他浏览器都可以处理 SVG 并且不需要后备。

Answer 3

使用Jquery SVG插件：

$(selector).svg({ 
loadURL: '', // External document to load 
onLoad: null, // Callback once loaded 
settings: {}}) // Additional settings for SVG element

试着抓住它，然后 onFail 加载图像。:)