svg 是图片的一种类型，基于xml 语言实现，和 png、jpg、webp 相比具有如下特点。
- 矢量图，可以无限放大而不失真；
- 体积小；
为什么svg图片类型具备上面的特点，而其它的图片格式不具备呢？这一切都因为svg的原理是基于xml（可扩展标记语言）语言实现的。
通过浏览器控制台审阅svg类型的图片可以发现，其本质上是一堆代码，即通过xml语言描绘出来的。svg图片的生成是通过xml提供的基本的线条、形状、颜色、模糊效果等组合而成的。基于此则不难理解为什么svg图片是矢量图和体积小的特点了。
svg 代码绘制简介
svg绘制和canvas画图类似，首先需要提供一张一定宽高的svg画布，图形线条色块都是于此未基础来绘制的。
常用全局属性
- width
- height
- fill 填充颜色
- stroke 元素轮廓设定
- opacity 定义元素透明度
- rx、ry 定义元素圆角
常用形状
- rect 矩形 x 属性定义矩形距离窗口左侧的距离，y 属性定义矩形距离窗口顶端的距离
- circle 圆 cx、cy 定义圆心坐标，r定义圆半径
- ellipse 椭圆 cx、cy 定义圆心坐标，rx定义水平半径，ry定义垂直半径
- line 直线 (x1, y1) 定义X轴Y轴直线开始的坐标，(x2, y2)定义X轴Y轴直线的结束坐标
- polygon 多边形 point: [] 定义多边形顶点坐标
- polyline 折线 point: [] 定义折线顶点
- path 路径绘制 M = moveto L = lineto 例：<path d="M250 150 L150 350 L350 350 Z" />
常用元素
- text 文本标识，tspan 文本子元素， textPath 带弧线的文本
- filter、defs 用来存放滤镜等效果
- linearGradient 线性渐变 必须定义在defs内部，每种颜色通过top标签来规定 ，offset 定义渐变的开始结束位置， id属性引用标识
- radialGradient 放射性渐变 (fx, fy ) 内层圆心坐标， (cx, cy) 外层圆心坐标， r 渐变半径
- g 用来组合对象的容器，添加到g元素的属性会被其所有的子元素继承
- 滤镜：feGaussianBlur...等
