在 HTML 中放置 SVG 内容的最佳方式答案

【问题标题】：Best Way To Place SVG Content Within HTML在 HTML 中放置 SVG 内容的最佳方式
【发布时间】：2011-04-18 17:41:18
【问题描述】：

根据我的研究，我知道有三种方法可以在 HTML 中放置 svg 文件：

使用嵌入：

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" />

使用对象：

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" />

使用 iframe：

<iframe src="plot1.svg" width="500" height="320"> </iframe>

我已经在一个测试平台（django 内置开发服务器，在 Firefox 3.6 中渲染页面）上对所有这三个进行了试验。在这种明显无菌的环境下，我没有注意到这三者之间的任何区别——w/r/t 性能或分辨率。

我的问题是其中一个是否比其他两个更好，如果是，是哪一个。答案当然可能取决于事实，我试图将其限制在相关的范围内：

我们经常在我们的网站上显示数据（例如时间序列），这些数据通常是为了响应某些用户操作而创建的；基于该用户操作，调用数据库，返回的数据被处理并发送到绘图引擎，该引擎呈现静态图像，然后嵌入到页面中 - 非常标准的东西。

这很好用，但我想为这些图表添加一些交互功能（例如，工具提示、超链接轴标签、突出显示绘图中的一组点）。有些图表相当复杂（例如，多面板调节），我还没有找到包含这些功能的 javascript 图表库。我最终决定使用相同的绘图库（R 中的 Lattice），但在 svg 中渲染每个图表，然后在后处理步骤中添加用户交互功能，该步骤主要由直接操作 XML 的 javascript 函数组成。

【问题讨论】：

仅供参考，有 several other ways 在页面上包含 svg。

标签： html xml svg

【解决方案1】：

<embed> 我通常会避免。它在 HTML4 中已被弃用，不允许适当的后备内容，并且在 IE 中存在一系列问题。

<object> 将允许您为不支持 SVG 的浏览器包含备用 HTML 内容。 <iframe> 将返回提示您下载 .svg 文件。其中哪一个最好可能取决于应用程序。

对于现代浏览器（包括版本 9 的 IE），另一种选择是将您的网页作为application/xhtml+html 提供服务，并在页面本身中包含 SVG 元素。

【讨论】：

哇，IE现在支持SVG了？从没想过会发生。 VML 是否仍然存在？
嗯，IE9 仍处于测试阶段，但支持 SVG（而且非常好）。 SVG 样板文件并没有使 SVG 实际上工作到 IE6，它只是可以在不杀死 IE6 的情况下放置在页面上。 VML 仍然存在，但似乎是不受欢迎的遗产； MS 在 IE8 中严重破坏了它，需要对仍在使用它的人进行另一轮乏味的解决方法。

【解决方案2】：

对我来说最好的方法是这样

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image x="0" y="0" height="60" width="60"  xlink:href="huge-red-circle.svg" />
</svg>

You can see the example here

来源：http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial

【讨论】：