将SVG插入到HTML中的几种方式（二）

最新推荐文章于 2025-05-27 18:19:13 发布

努力学习前端的77

最新推荐文章于 2025-05-27 18:19:13 发布

阅读量2.3k

点赞数 1

分类专栏： svg 文章标签： svg

本文链接：https://blog.csdn.net/qq_36545813/article/details/105675730

版权

svg 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了将SVG图形直接嵌入HTML文档的几种方法，包括内联SVG的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将SVG插入到HTML中主要有以下几种方式：

<ember src="xxx.svg" type="image/svg+xml"  />
//优势：所有主要浏览器都支持，并允许使用脚本
//缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

//将 SVG 作为object对象导入
//注意，MIME type必须是*image/svg+xml*。
//可以使用CSS控制SVG的样式
<object data="xxx.svg" type="image/svg+xml"></object>
//优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
//缺点：不允许使用脚本

//将 SVG放入 iframe 中导入：
//可以使用CSS控制SVG的样式
<iframe src="xxx.svg"></iframe>
//优势：所有主要浏览器都支持，并允许使用脚本
//缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

//将 SVG 作为image导入：
//这可能是将SVG导入HTML文档的最简单的方法。将`.svg`文件加到一个普通`<img>`标签内。
//你需要确保你的[服务器支持`.svg`文件]。
//SVG作为图像引用时:-------------------
//- 大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)
//- 依据浏览器的安全策略，SVG中定义的脚本也可能不会执行
<img src="xxx.svg" alt="example">

//在css中把`.svg`文件作为背景图片导入：
//注意要加一个备用的.png图像，以防浏览器无法显示svg。
.svg-bg { 
    background: url("xxx.png");
    background-image: url("xxx.svg"); 
}

//使用a标签链接到svg文件
<a href="xxx.svg">View SVG file</a>

使用内联SVG,直接在HTML中嵌入SVG:

//直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。
<!DOCTYPE html>
<html>
  <body>
    <svg>
      ...
    </svg>
  </body>
</html>