在HTML中放置SVG内容的最佳方法 [英] Best Way To Place SVG Content Within HTML

问题描述

从我的研究中，我了解到有三种方法可以在HTML内放置svg文件:

From my research, i understand there are three ways to place an svg file inside HTML:

使用 嵌入式 :

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

使用 iframe :

using iframe:

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

我已经在一个测试平台(django内置的dev服务器，在Firefox 3.6中渲染页面)上对这三个选项进行了实验.在这种明显无菌的环境下，我没有注意到这三点之间的差异-w/r/t性能或分辨率.

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.

我的问题是，其中之一是否比其他两个更好?如果是，哪一个更好.答案当然可能取决于事实，我试图将其限制为相关:

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.

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

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.

推荐答案

<embed>我通常会避免.它已在HTML4中弃用，不允许使用适当的后备内容，并且在IE中出现了很多问题.

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

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

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

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

The other alternative, for modern browsers (including IE from version 9) is to serve your web page as application/xhtml+html and include the SVG elements in the page itself.

这篇关于在HTML中放置SVG内容的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！