Question

我刚开始使用内联SVG在资源密集的网站上显示图像。但是，我还使用switch和foreignobject标签进行回退，以便旧版浏览器只显示一个png图像。

以下是笨蛋 - inline svg in html - how to degrade gracefully?

还有更多细节

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xml:space='preserve'
  width="100" height="100">
<switch>
<g>
<!-- the svg goes here -->
</g>
<foreignObject width="100" height="100">
<img src="/some_image.png"/>
</foreignObject>
</switch>
</svg>

我认为这会减轻服务器的负担 - 例如对于包含4个图像的页面，浏览器只需一次点击即可获得所有内容，而不是5次访问服务器，1次访问页面，1次访问每个img标记。

但是，现在我已经部署了这个解决方案，我发现（通过检查服务器日志）浏览器实际上正在处理foreignobject标记内的img请求，无论它们是否可以处理SVG。

换句话说，它增加了服务器上的负载，因为页面更大（充满了SVG）并且无论如何都会下载图像，即使它们从未显示过。

这看起来很疯狂 - 我认为切换的想法是浏览器应该处理它理解的第一个标记（在我的例子中，g标记）并忽略其余的（在我的例子中是foreignobject）。

我在Firefox 17.0.1，Chrome 23.0.1271.95，Safari 5.1.7和Opera 12.10中对此进行了测试，他们都是这样做的。

有什么方法可以说服浏览器真的非常不需要下载图片？

由于

克里斯

Answer 1

您仍然可以在<switch> <use>或<filter>中使用该<clipPath>儿童直接显示的document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")儿童内容。它只是直接呈现切换子项被抑制。

停止下载的唯一方法是不在图像上设置src属性，除非你需要它。您可以使用javascript检查SVG支持，例如

{{1}}

然后设置src属性，如果返回true。

内联SVG后备 - 浏览器处理所有开关元素

1 个答案: