SVG简介

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...等