在 HTML5/CSS3/Javascript 应用程序中使用 SVG 图像的首选方式是什么？答案

【问题标题】：What's the preferred way to use SVG images in HTML5/CSS3/Javascript applications?在 HTML5/CSS3/Javascript 应用程序中使用 SVG 图像的首选方式是什么？
【发布时间】：2011-12-13 04:31:30
【问题描述】：

我知道的选项有<svg>、<object>、<embed>、<img> 和<iframe>。它们的相对优点和缺点是什么？还有其他的吗？

【问题讨论】：

您忘记了 css 背景图片、列表图片和 content 属性。
@Erik：您是否注意到 iframe/embed/object 之间的性能差异？我注意到在 Chrome 中加载对象需要更长的时间。
@bennedich：我还没有对此进行任何研究，但我有兴趣查看针对所有不同情况的一些测量/测试（嘿，这是你自愿写博客的地方），对吧？;)

标签： javascript html css svg

【解决方案1】：

<iframe>、<embed> 和 <object> 都嵌入了外部 svg 文件，它们都允许编写脚本。 <embed> 似乎或多或少是事实上的标准。 HTML5 规范说：

iframe 元素表示嵌套的浏览上下文。
embed 元素表示外部（通常是非 HTML）应用程序或交互式内容的集成点。
object 元素可以表示一个外部资源，根据资源的类型，它可以被视为图像、嵌套浏览上下文或要处理的外部资源通过插件。

<svg> 仅用于内联 svg 内容，但可以包含带有外部内容的 <image> 元素。

<img> 和嵌套的<image> 元素不允许编写脚本。

来源：

【讨论】：