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

What's the preferred way to use SVG images in HTML5/CSS3/Javascript applications?

本文关键字:图像 方式 是什么 SVG CSS3 HTML5 Javascript 应用程序      更新时间:2023-09-26

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

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

  • iframe元素表示一个嵌套的浏览上下文。

  • 嵌入元素表示外部(通常是非html)应用程序或交互式内容的集成点。

  • object元素可以表示一个外部资源,根据资源的类型,它可以作为一个图像,作为一个嵌套的浏览上下文,或者作为一个外部资源由插件处理。

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

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

来源:

  • http://dev.w3.org/html5/spec/the-iframe-element.html the-iframe-element
  • http://dev.w3.org/html5/spec/the-embed-element.html the-embed-element
  • http://dev.w3.org/html5/spec/the-object-element.html the-object-element