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

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>

你可以在这里看到这个例子

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