theme: smartblue
本文简介 点赞 + 关注 + 收藏 = 学会了
技术一直在演变,在网页中使用 SVG
的方法也层出不穷。每个时期都有对应的最优解。
【前端|SVG 在前端的7种使用方法,你还知道哪几种()】所以我打算把我知道的 7种 SVG
的使用方法列举出来,有备无患~
如果你还知道其他方法,可以在评论区补充~
1. 在浏览器直接打开
文章图片
```svg
雷猴 ```
xml
是浏览器能读取的格式,但如果希望 svg
能在浏览器中渲染出来,需要使用 xmlns
声明渲染规则。
所以必须使用 xmlns="http://www.w3.org/2000/svg"
。
2. 内嵌到 HTML 中(推荐???) html
可以看到上面的代码中, 标签并没有使用
xmlns="http://www.w3.org/2000/svg"
声明命名空间,这是因为 HTML 5
文档使用 标记,它允许跳过
SVG
命名空间声明,HTML
解析器会自动识别 SVG
元素和它的子元素,除了
元素的子元素。
在写本文时,将 SVG
内嵌到 HTML
中 的做法是最常见的,也是比较推荐的方式之一。
做特效时,这种使用方式也是比较轻松的。
3. CSS 背景图(推荐?) ```html
```
SVG
也是一种图片格式,所以按理说是能当做背景图来使用的。
一试,果然可以~
4. 使用 img 标签引入(推荐?) html
文章图片
既然 SVG
可以在 CSS
中当背景图使用,那也可以在
文章图片
```html
```
iframe
可以在网页里再嵌套一个网页,既然 SVG
可以直接在浏览器打开,那使用 引用
SVG
同样也是可以的。
需要注意的是, 默认是有个边框样式的,如果你使用这种方式引入
SVG
可能还需要自己手动调节一下样式。
6. 使用 embed 标签引入(不推荐?) html
标签定义了一个容器,用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。
标签已经被标准采用了。但它不能包含任何子内容,因此如果嵌入失败就没有备用选项了。所以现阶段来看,我不太推荐使用
embed
的方式引入 SVG
。
7. 使用 object 标签引入(不推荐?) ```html
```
是通过
data
属性引入资源的。它可以用于嵌入图像,类似 ,也可以用于嵌入独立的
HTML
文档,类似 。
使用 嵌入
SVG
可以让那些不能直接显示 SVG
但又有 SVG
插件的老旧浏览器展示 SVG
。
需要注意的是,在某些现代浏览器中,type
和 codebase
是可以不写的。
type
用来声明当前引入的资源是属于什么类型。
总结 在写本时,我推荐使用 内嵌到 HTML
的方式来做日常开发。
其他方式按照你实际需求去使用即可。
最后的 embed
和 object
这两种方式可以当做备用方案去使用。
代码仓库 ?雷猴 SVG
推荐阅读 《Canvas 从入门到劝朋友放弃(图解版)》
《Fabric.js 从入门到膨胀》
《『Three.js』起飞!》
《console.log也能插图!!!》
《纯css实现117个Loading效果》
《视差特效的原理和实现方法》
《这18个网站能让你的页面背景炫酷起来》
推荐阅读
- WEB前端基础HTML+CSS|less变量
- 纯CSS 毛玻璃效果
- CSS3|什么是BFC,BFC的使用
- html|手把手教你用vuepress搭建自己的网站(2)
- C语言|C语言课程设计|学生成绩管理系统(含完整代码)
- Java基础|Java中的字节流和字符流如何理解——精简
- Java基础|Java中Map集合如何理解(四)——精简
- vue3|vue3学习7(props以及验证)
- css|【前端】Emmet语法、CSS复合选择器、元素显示样式