前端|SVG 在前端的7种使用方法,你还知道哪几种()

theme: smartblue 本文简介 点赞 + 关注 + 收藏 = 学会了
技术一直在演变,在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。
【前端|SVG 在前端的7种使用方法,你还知道哪几种()】所以我打算把我知道的 7种 SVG 的使用方法列举出来,有备无患~
如果你还知道其他方法,可以在评论区补充~
1. 在浏览器直接打开 前端|SVG 在前端的7种使用方法,你还知道哪几种()
文章图片

```svg
雷猴 ```
xml 是浏览器能读取的格式,但如果希望 svg 能在浏览器中渲染出来,需要使用 xmlns 声明渲染规则。
所以必须使用 xmlns="http://www.w3.org/2000/svg"
2. 内嵌到 HTML 中(推荐???) html svg demo
可以看到上面的代码中, 标签并没有使用 xmlns="http://www.w3.org/2000/svg" 声明命名空间,这是因为 HTML 5 文档使用 标记,它允许跳过 SVG 命名空间声明,HTML 解析器会自动识别 SVG 元素和它的子元素,除了 元素的子元素。
在写本文时,将 SVG 内嵌到 HTML 中 的做法是最常见的,也是比较推荐的方式之一。
做特效时,这种使用方式也是比较轻松的。
3. CSS 背景图(推荐?) ```html
```
SVG 也是一种图片格式,所以按理说是能当做背景图来使用的。
一试,果然可以~
4. 使用 img 标签引入(推荐?) html 前端|SVG 在前端的7种使用方法,你还知道哪几种()
文章图片

既然 SVG 可以在 CSS 中当背景图使用,那也可以在 前端|SVG 在前端的7种使用方法,你还知道哪几种()
文章图片

```html
```
iframe 可以在网页里再嵌套一个网页,既然 SVG 可以直接在浏览器打开,那使用