一、前言
是什么
SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于XML语法的图像格式，与位图不同，它使用矢量路径描述图像，因此可以无限缩放而不失真。SVG已经成为Web开发的常用技术，尤其在数据可视化方面，它具有广泛的应用前景。
优势
1．任意缩放
2．文本独立
3．较小文件
4．超强显示效果
5．超级颜色控制
6．交互X和智能化
二、使用方法
1. 使用网络路径
xml 是浏览器能读取的格式，但如果希望 svg 能在浏览器中渲染出来，需要使用 xmlns 声明渲染规则。
所以必须使用 xmlns="http://www.w3.org/2000/svg"。
<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>
2. 内嵌到HTML中
HTML5 文档使用 <!DOCTYPE html> 标记，它允许跳过 SVG 命名空间声明，HTML 解析器会自动识别 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。
将 SVG 内嵌到 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>
3. CSS背景图
SVG 也是一种图片格式，所以说是能当做背景图来使用的。
<div class="svg_bg_img"></div>
<style>
.svg_bg_img {
width: 100px;
height: 100px;
background: url('./case1.svg') no-repeat;
background-size: 100px 100px;
}
</style>
4. 使用 img 标签引入
SVG 可以在 CSS 中当背景图使用，也可以在 <img> 标签里使用
<img src="./case1.svg" width="100" height="100">
5. 使用 iframe 标签引入
iframe 可以在网页里再嵌套一个网页，SVG 可以直接在浏览器打开，使用 <iframe> 引用 SVG 同样也是可以的。
需要注意的是，<iframe> 默认是有个边框样式的，如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。
<iframe
src="./case1.svg"
width="100"
height="100"
></iframe>
6. 使用 embed 标签引入
<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。
<embed> 标签已经被标准采用了。但它不能包含任何子内容，因此如果嵌入失败就没有备用选项了。
<embed
src="./case1.svg"
width="100"
height="100"
/>
7. 使用 object 标签引入
<object> 是通过 data 属性引入资源的。它可以用于嵌入图像，类似 <img> ，也可以用于嵌入独立的 HTML 文档，类似 <iframe> 。
使用 <object> 嵌入 SVG 可以让那些不能直接显示 SVG 但又有 SVG 插件的老旧浏览器展示 SVG。
需要注意的是，在某些现代浏览器中，type 和 codebase 是可以不写的。
type 用来声明当前引入的资源是属于什么类型。
<object
data="./case1.svg"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install"
></object>
原文链接：https://juejin.cn/post/7262364876936659001 作者：加油乐
