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

发布于 2024-10-27 23:14:47 字数 339 浏览 1 评论 0原文

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

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

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

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

原文

An illustration that I want to include in a site is 28.1 times smaller in SVG format than the same illustration saved as a PNG.

Unfortunately, I have to cater for browsers that aren't SVG-enabled. So I'm still including the PNG as an alternative, like so:

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

Will SVG enabled browsers ignore the PNG in this case or will it still get loaded in the background somehow? (i.e. am I saving on overall load time?)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千纸鹤 2024-11-03 23:14:47

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

通过加载此页面并查看 Firebug 和 Chrome 开发者工具中的网络面板进行测试：
Firebug 显示对 Tiger.svg 和 Tiger.png 的请求
Chrome 开发者工具显示对 Tiger.svg 和 Tiger.png 的请求

请注意，这并不意味着不能使用 SVG好主意。您仍然应该使用 SVG，因为它的打印和缩放效果比相应的 PNG 更好。

回复收藏 0 原文

心凉怎暖 2024-11-03 23:14:47

我用过类似的东西：

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

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

I used something like that:

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

Internet Explorer < 9 can't display SVG, so it gets the PNG. Almost all other browers can handle the SVG and don't need the fallback.

回复收藏 0 原文

半寸时光 2024-11-03 23:14:47

使用 Jquery SVG 插件：

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

尝试捕获它，并在失败时加载图像。 :)

With Jquery SVG plugin:

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

try and catch it, and onFail load the image. :)

回复收藏 0 原文

~没有更多了~