本文简介
点赞 + 关注 + 珍藏 = 学会了
技术始终在演变，在网页中应用 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"/><embed> 标签定义了一个容器，用来嵌入内部利用或者互动程序。它也能够插入各种媒体资源。
<embed> 标签曾经被规范采纳了。但它不能蕴含任何子内容，因而如果嵌入失败就没有备用选项了。所以现阶段来看，我不太举荐应用 embed 的形式引入 SVG 。
7. 应用 object 标签引入（不举荐❌）
<object data="./case1.svg" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install"></object><object> 是通过 data 属性引入资源的。它能够用于嵌入图像，相似 <img> ，也能够用于嵌入独立的 HTML 文档，相似 <iframe> 。
应用 <object> 嵌入 SVG 能够让那些不能间接显示 SVG 但又有 SVG 插件的老旧浏览器展现 SVG。
须要留神的是，在某些古代浏览器中，type 和 codebase 是能够不写的。
type 用来申明以后引入的资源是属于什么类型。
总结
在写本时，我举荐应用 内嵌到 HTML 的形式来做日常开发。
其余形式依照你理论需要去应用即可。
最初的 embed 和 object 这两种形式能够当做备用计划去应用。
代码仓库
⭐雷猴 SVG
举荐浏览
《Canvas 从入门到劝敌人放弃（图解版）》
《Fabric.js 从入门到收缩》
《『Three.js』腾飞！》
《console.log也能插图！！！》
《纯css实现117个Loading成果》
《视差特效的原理和实现办法》
《这18个网站能让你的页面背景炫酷起来》
代码仓库