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

最新推荐文章于 2023-05-17 13:01:44 发布

德育处主任Pro

最新推荐文章于 2023-05-17 13:01:44 发布

阅读量9.5k

点赞数 1

文章标签：前端 javascript html css 开发语言

本文链接：https://blog.csdn.net/weixin_39415598/article/details/125692207

版权

本文介绍了在前端开发中使用SVG的7种方法，包括在浏览器直接打开、内嵌到HTML、作为CSS背景图、使用img、iframe、embed和object标签引入，并对每种方法的适用性和优缺点进行了分析，推荐内嵌到HTML的方式作为主要使用方法。

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

theme: smartblue

本文简介

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

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

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

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

1. 在浏览器直接打开

```svg

```

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

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

2. 内嵌到 HTML 中(推荐⭐⭐⭐)

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>  <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 中 的做法是最常见的，也是比较推荐的方式之一。

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