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

2022-10-20 03:01| 来源: 网络整理| 查看: 265

本文简介

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

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

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

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

1. 在浏览器直接打开

雷猴复制代码

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

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

2. 内嵌到 HTML 中（推荐⭐⭐⭐） svg demo 复制代码

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

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

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

3. CSS 背景图（推荐⭐） .svg_bg_img { width: 100px; height: 100px; background: url('./case1.svg') no-repeat; background-size: 100px 100px; } 复制代码

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

一试，果然可以~

4. 使用 img 标签引入（推荐⭐）复制代码

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

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

复制代码

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

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

6. 使用 embed 标签引入（不推荐❌）复制代码

标签定义了一个容器，用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。

标签已经被标准采用了。但它不能包含任何子内容，因此如果嵌入失败就没有备用选项了。所以现阶段来看，我不太推荐使用 embed 的方式引入 SVG 。

7. 使用 object 标签引入（不推荐❌）复制代码

是通过 data 属性引入资源的。它可以用于嵌入图像，类似，也可以用于嵌入独立的 HTML 文档，类似。

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

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

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

总结

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

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

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

代码仓库

⭐雷猴 SVG

今日新闻