在 HTML 中放置 SVG 内容的最佳方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3820406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best Way To Place SVG Content Within HTML
提问by doug
From my research, i understand there are three ways to place an svg file inside HTML:
根据我的研究，我了解到可以通过三种方法在 HTML 中放置 svg 文件：
using embed:
使用嵌入：
<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" />
using object:
使用对象：
<object data="plot1.svg" width="500" height="320" type="image/svg+xml" />
using iframe:
使用iframe：
<iframe src="plot1.svg" width="500" height="320"> </iframe>
I've experimented with all three on a test rig (django built-in dev server, rendering the pages in Firefox 3.6). Under this obviously sterile environment, i haven't noticed any difference between the three--w/r/t performance or resolution.
我已经在测试设备（django 内置开发服务器，在 Firefox 3.6 中呈现页面）上对所有三个进行了试验。在这种明显无菌的环境下，我没有注意到三者之间的任何差异——w/r/t 性能或分辨率。
My Question is whether one of these is better than the other two, and if so, which one. The answer might of course depend on the facts, which i've tried to limit to what's relevant:
我的问题是其中之一是否比其他两个更好，如果是，是哪个。答案当然可能取决于事实，我试图将其限制为相关内容：
We frequently display data (e.g, time series) on our website, usually created in response to some user action; based on that user action, a call is made to a database, the data returned is crunched and sent to the plotting engine, which renders a static image which is then embedded in the page--very standard stuff.
我们经常在我们的网站上显示数据（例如时间序列），通常是为了响应某些用户操作而创建的；根据该用户操作，对数据库进行调用，对返回的数据进行处理并发送到绘图引擎，该引擎呈现静态图像，然后将其嵌入到页面中——这是非常标准的内容。
This works fine, but i would like to add some interactive features to these charts (e.g., tooltips, hyperlinked axis labels, highlighting a group of points w/in a plot). Some of the charts are fairly sophisticated (e.g., multi-panel conditioning) and i have not found a javascript chart library that includes these features. I finally settled on using the same plotting library (Lattice in R) but rendering each chart in svg and then adding the user-interaction features in a post-processing step, which consists essentially of javascript functions which manipulate the XML directly.
这工作正常，但我想向这些图表添加一些交互功能（例如，工具提示、超链接轴标签、突出显示绘图中的一组点）。一些图表相当复杂（例如，多面板调节），我还没有找到包含这些功能的 javascript 图表库。我最终决定使用相同的绘图库（R 中的 Lattice），但在 svg 中呈现每个图表，然后在后处理步骤中添加用户交互功能，该步骤主要由直接操作 XML 的 javascript 函数组成。
采纳答案by bobince
<embed>I would generally avoid. It's deprecated in HTML4, doesn't allow proper fallback content, and has had a selection of problems in IE.
<embed>我一般会避免。它在 HTML4 中已被弃用，不允许使用适当的后备内容，并且在 IE 中存在一些问题。
<object>will allow you to include fallback HTML content for browsers without SVG support. <iframe>will fall back to prompting you to download the .svg file. Which of those is best probably depends on the application.
<object>将允许您为不支持 SVG 的浏览器包含后备 HTML 内容。<iframe>将回退到提示您下载 .svg 文件。其中哪一个最好可能取决于应用程序。
The other alternative, for modern browsers (including IE from version 9) is to serve your web page as application/xhtml+htmland include the SVG elements in the page itself.
对于现代浏览器（包括版本 9 中的 IE）的另一种选择是将您的网页作为application/xhtml+html并在页面本身中包含 SVG 元素。
回答by JALF
for me the best way is this
对我来说最好的方法是这个
<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>
source: http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial
来源：http: //edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial
