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

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

本文简介

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

技术一直在演变，在网页中使用 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 标签引入（不推荐）

总结

代码仓库

推荐阅读

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

旧手机新玩法，MacroDeck进阶指南

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库