SVG 可缩放矢量图形（Scalable Vector Graphics）
存在形式：
SVG 是使用 XML 来描述二维图形和绘图程序的语言
在html中的引入方式
1、
在相应标签
矩形 <rect>
// 属性- x 属性定义矩形的左侧位置（到浏览器窗口左侧的距离）- y 属性定义矩形的顶端位置（同上）- rx 属性定义水平半径 - ry 属性定义垂直半径
圆形 <circle>
// 属性- cx,cy 表示圆心所在位置
椭圆 <ellipse>
//属性- cx,cy 表示圆心所在位置- rx x轴半径- ry y轴半径
线 <line>
- x1y1,x2,y2表示起点和终点（x0，y0，x1,y1也可以）
折线 <polyline>
//属性- points 表示多个点 按顺序连接
多边形 <polygon>
// 自动闭合起点和终点的折线而已
路径 <path>
// 属性M = moveto 移动到新的位置L = lineto 从当前坐标画一条直线到一个新坐标H = horizontal lineto 画一条水平线到新坐标V = vertical lineto 画一条垂直线到新坐标C = curveto S = smooth curvetoQ = quadratic Belzier curveT = smooth quadratic Belzier curvetoA = elliptical Arc 画一条椭圆弧线Z = closepath 关闭当前路径
文本
图案
一些共有属性
fill-opacity 属性定义填充颜色透明度（0 - 1）
stroke-opacity 属性定义笔触（类似border）颜色的透明度（0 - 1）
stroke: 笔触颜色
stroke-width：笔触大小
-
stroke-linecap：
有三个值`butt` `square` `round` 用来控制绘制描边的方式butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。
表现形式
-
stroke-dasharray: 是一组用逗号分割的数字组成的数列, 比如"5,10,5"
stroke-linejoin:用来控制两条描边线段之间，用什么方式连接。
表现形式
注意 样式属性可以直接写在dom上面也可以写成css,比如stroke，fill等等，也有一些是独立的，比如cy,cx,ry,rx
滤镜
1、滤镜效果列表
// 混合和合并效果feBlend ：类似于CSS blend modes，描述了图像通过混合模式进行交互feComposite ：混合图片，可以以百分比的方式进行混合feMerge ：不同滤镜的組合 ( merge )// 色彩效果feColorMatrix ：颜色应用矩阵转换。( Matrix multiplication )feComponentTransfer ：允许图片由四个色彩通道重新定义（feFuncA、feFuncB、feFuncG、feFuncR）feFlood ：重新绘制矩形並和其他物件结合//光照和光源效果feDiffuseLighting ：使用 alpha channel 计算凹凸feDistantLight ：定义光源fePointLight、feSpecularLighting、feSpotLight// 其它特殊效果feConvolveMatrix ：透过矩阵运算，做出模糊，边缘检测，锐化，浮雕和斜角...等效果。feDisplacementMap ：置换每一英吋的图像feGaussianBlur ：高斯模糊feImage ：使用其他的过滤器(像feBlend或feComposite) feMergeNodefeMorphology： 削弱或扩张源图像feOffset ：用来创建阴影feTile ：让图像以重复模式進入滤镜feTurbulence ：创建震荡与纹理
2、滤镜基本用法
通过<defs></defs>中的<filter></filter>定义相滤镜效果，一个<filter>中可以有多个滤镜效果，都是<fexxx>的标签形式存在
filter:url(#xxx)"的形式去引用滤镜 // 容器元素 (除了mask) and 图片元素2、然后通过fill:url(#xxx)"的形式去引用滤镜 // 形状和text容器元素可以多次复用 每个滤镜效果都有自己的
svg应用
使用symbol 创建icon
例如<symbol>和<use>结合使用能创建图标
// 在页面中如此引入即可
换句话说，就是你定义了一组图形对象（使用<symbol>元素）之后，可以使用<use>元素来对它进行无限次实例化展示。你使用xlink:href属性来指定你想要展示哪一组图标，这里，我们要展示的是id为#heart的<symbol>元素
注意xlink:href属性和id标识符是唯一对应的（它不能引用外部资源中的id）
这种方法非常好用，但缺点是SVG sprite不能缓存。其中属性viewBox 表示svg的可视区域，
动画
svg动画可以依赖css中的animation或者svg中动画标签来完成
这里css动画部展开讲，看看svg自带的动画标签和属性
-
<set>
set是没有持续的动画效果的，有点类似css中的transform 但是他还可以设置延迟执行时间
-
<animate>
他能实现下面三个标签的功能 所以 下面三个比较少用
<animateColor>
<animateTransform>
<animateMotion>
动画标签部分属性说明：
1. attributeName = <attributeName> 要变化的元素属性名称
(1) 可以是元素直接暴露的属性，例如，元素上的x, y或者font-size; (2) 可以是CSS属性。例如，透明度opacity.
2. attributeType = “CSS | XML | auto”
attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。 x, y以及transform就属于XML, opacity就属于CSS. auto为默认值，一般不用设置，浏览器会自动判断
3.from, to, by, values
from 如果和默认值一样可以忽略，to和by必须有一个出现才能形成动画，to是到制定目标，是绝对的，by是相对的，是from+by就是终点。to和by同时出现，by将被忽略
更详细请前往
svg 文案
三种方法来制作图案文本
fill
mask
clip-path
兼容性
1、目前主流浏览器,ie9+都支持svg基本属性，但是滤镜、字体等等效果也是
2、对滤镜支持各不同，并且存在一定的性能问题
3、优雅降级
相对于其他格式的图片
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放大SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）SVG 可以与 Java 技术一起运行SVG 是开放的标准SVG 文件是纯粹的 XML和其他相似技术相比，比如canvas、flash
<canvas>和<svg>都是HTML5推荐使用的图形技术，Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图形；SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身就能独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准
Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景svg库
1、
2、