SVG 在前端的7种使用方法，你还知道哪几种?

zhezhongyun 2025-04-27 17:34 27 浏览

本文简介

点赞 + 关注 + 收藏 = 学会了

技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。

所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~

如果你还知道其他方法，可以在评论区补充~

1. 在浏览器直接打开

<?xml version="1.0" ?>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <title>雷猴</title>
  <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>

xml 是浏览器能读取的格式，但如果希望 svg 能在浏览器中渲染出来，需要使用 xmlns 声明渲染规则。

所以必须使用 xmlns="
http://www.w3.org/2000/svg"。

2. 内嵌到 HTML 中（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg demo</title>
</head>
<body>
  <div>
    <!-- 内嵌到 HTML 中 -->
    <svg width="100%" height="100%" version="1.1">
      <circle cx="50" cy="50" r="50" fill="hotpink"></circle>
    </svg>
  </div>
</body>
</html>

可以看到上面的代码中，<svg> 标签并没有使用 xmlns="
http://www.w3.org/2000/svg" 声明命名空间，这是因为 HTML 5 文档使用 <!DOCTYPE html> 标记，它允许跳过 SVG 命名空间声明，HTML 解析器会自动识别 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。

在写本文时，将 SVG 内嵌到 HTML 中 的做法是最常见的，也是比较推荐的方式之一。

做特效时，这种使用方式也是比较轻松的。

3. CSS 背景图（推荐）

<style>
.svg_bg_img {
  width: 100px;
  height: 100px;
  background: url('./case1.svg') no-repeat;
  background-size: 100px 100px;
}
</style>

<div class="svg_bg_img"></div>

SVG 也是一种图片格式，所以按理说是能当做背景图来使用的。

一试，果然可以~

4. 使用 img 标签引入（推荐）

<img src="./case1.svg" width="100" height="100">

既然 SVG 可以在 CSS 中当背景图使用，那也可以在 <img> 标签里使用咯~

5. 使用 iframe 标签引入（不推荐）

<iframe
  src="./case1.svg"
  width="100"
  height="100"
></iframe>

iframe 可以在网页里再嵌套一个网页，既然 SVG 可以直接在浏览器打开，那使用 <iframe> 引用 SVG 同样也是可以的。

需要注意的是，<iframe> 默认是有个边框样式的，如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。

6. 使用 embed 标签引入（不推荐）

<embed
  src="./case1.svg"
  width="100"
  height="100"
/>

7. 使用 object 标签引入（不推荐）

<object
  data="./case1.svg"
  type="image/svg+xml"
  codebase="http://www.adobe.com/svg/viewer/install"
></object>

使用 <object> 嵌入 SVG 可以让那些不能直接显示 SVG 但又有 SVG 插件的老旧浏览器展示 SVG。

需要注意的是，在某些现代浏览器中，type 和 codebase 是可以不写的。

type 用来声明当前引入的资源是属于什么类型。

总结

在写本时，我推荐使用 内嵌到 HTML 的方式来做日常开发。

其他方式按照你实际需求去使用即可。

最后的 embed 和 object 这两种方式可以当做备用方案去使用。

代码仓库

雷猴 SVG

SVG 在前端的7种使用方法，你还知道哪几种?

本文简介

1. 在浏览器直接打开

2. 内嵌到 HTML 中（推荐）

3. CSS 背景图（推荐）

4. 使用 img 标签引入（推荐）

5. 使用 iframe 标签引入（不推荐）

6. 使用 embed 标签引入（不推荐）

7. 使用 object 标签引入（不推荐）

总结

代码仓库

推荐阅读

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?