Question

从我的研究中，我了解有三种方法可以将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 ：

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

我在测试台（django内置开发服务器，在Firefox 3.6中渲染页面）中对所有这三个进行了实验。在这个明显无菌的环境下，我没有发现三种w / r / t性能或分辨率之间存在任何差异。

我的问题是，其中一个是否优于其他两个，如果是，哪一个。答案当然可能取决于事实，我试图限制相关的事实：

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

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

Answer 1

<embed>我一般会避免。它在HTML4中被弃用，不允许正确的后备内容，并且在IE中有一些选择的问题。

<object>将允许您为没有SVG支持的浏览器添加后备HTML内容。 <iframe>将回退以提示您下载.svg文件。哪个最好可能取决于应用程序。

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

Answer 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

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

2 个答案: