在HTML中放置SVG内容的最佳方法

从我的研究中，我了解到有三种方法可以将svg文件放入HTML中：

使用嵌入：

<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 src="plot1.svg" width="500" height="320"> </iframe>

使用对象：

<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 src="plot1.svg" width="500" height="320"> </iframe>

使用iframe：

<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 src="plot1.svg" width="500" height="320"> </iframe>

我已经在一个测试平台（django内置开发服务器，在Firefox3.6中呈现页面）上对这三种方法进行了实验。在这种明显无菌的环境下，我没有注意到三者之间的任何差异——w/r/t性能或分辨率

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

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

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

我通常会避免使用。它在HTML4中被弃用，不允许适当的回退内容，并且在IE中有一些问题

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

---

另一种选择是，对于现代浏览器（包括9版IE），将您的网页作为

应用程序/xhtml+html

提供，并在页面本身中包含SVG元素。

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

<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>

---

来源：

哇，IE现在支持SVG了吗？没想到会这样。VML还存在吗？IE9还处于测试阶段，但支持SVG（也非常好）。SVG样板文件并不能使SVG真正适用于IE6，它只是使它能够在不破坏IE6的情况下放在页面上。VML仍然存在，但似乎是多余的遗产；MS在IE8中将其破坏得相当严重，需要为仍在使用它的用户提供另一轮繁琐的解决方案。仅供参考，页面上必须包含svg。标签不是自动关闭的，您应该添加