SVG(Scalable Vector Graphics)
可伸缩矢量图形，它是用XML格式来定义用于网络的基于矢量的图形，它的特点是**图像在放大或改变尺寸的情况下其图形质量不会有所损失，同时他和DOM一样都是W3C的一个标准。
位图和矢量图
位图，也就是我们经常能看到的图片，它是一个平面上密集排布的点的集合，也就是说它是由一个个点构成的。对它进行放大那么相对应的点就会进行放大，这样就会让图片显得十分不清晰。
矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。
SVG代码解析
- 第一行包含了XML声明。standalone属性规定此SVG文件是否“独立”，是否引用外部文件。standalone="no" 意味着 SVG 文档会引用一个外部文件。栗子中引用了DTD文件。
- 第二引用了这个外部的 SVG DTD。该 DTD 位于 “”。该 DTD 位于W3C，含有所有允许的SVG元素。
- svg标签是SVG 代码的根元素。
SVG栗子
栗子1
SVG
- version：定义所使用的 SVG 版本。
- xmlns：定义 SVG 命名空间。
- style：定义 CSS 属性。
- width 和 height：设置此 SVG 文档的宽度和高度。
- stroke，笔画颜色：设置图形边线的颜色。
- stroke-width，笔画宽：设置图形边线的宽。
- fill，填充：设置形状内的颜色。
- fill-opacity：定义填充颜色透明度（合法的范围是：0 - 1）。
- stroke-opacity：定义了笔触颜色的透明度（合法的范围是：0 - 1）。
- opacity：定义了元素的透明值 (范围: 0 到 1)。
- x,y,rx,ry等：都是相对于画布而言的，画布看不见，在svg标签上设置的width和height就是画布的宽高。
- rect，矩形：x属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）；y属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）；rx 和 ry 属性可使矩形产生圆角；
- circle and ellipse，圆形和椭圆：cx和cy属性定义圆心的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)。
- circle: r属性定义圆的半径。
- ellipse: RX属性定义的水平半径；RY属性定义垂直半径。
- line，线：x1 属性在 x 轴定义线条的开始，y1 属性在 y 轴定义线条的开始，x2 属性在 x 轴定义线条的结束，y2 属性在 y 轴定义线条的结束。
- polygon和polyline，多边形和折线：points 属性定义每个角的 x 和 y 坐标，角是按逆时针排序的。
- text，文本：x,y是相对于整个视窗的绝对定位，dx,dy是相对于前一个字符的长度（ps:空格也算是一个字符），rotate是字符旋转一定角度。
- path，路径：下面的命令可用于路径数据：
| 指令&名称 | 参数 | 描述 |
|---|---|---|
| M = moveto移动到 | x,y | 移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制 |
| L = lineto连直线到 | x,y | 从当前画笔所在位置绘制一条直线到指定的（x,y）坐标 |
| H = horizontal lineto水平连线到 | x | 绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标 |
| V = vertical lineto垂直连线到 | y | 从当前位置绘制一条垂直直线到参数指定的y坐标 |
| C = curveto三次方贝塞尔曲线 | x1,y1 x2,y2 x,y | 从当前画笔位置绘制一条三次贝塞尔曲线到参数（x,y）指定的坐标。x1,y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度 |
| S = smooth curveto平滑三次方贝塞尔曲线 | x2,y2 x,y | 从当前画笔位置绘制一条三次贝塞尔曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同 |
| Q = quadratic Bézier curve二次方贝塞尔曲线 | x1,y1 x,y | 从当前画笔位置绘制一条二次方贝塞尔曲线到参数（x,y）指定的坐标。x1,y1是控制点，用于控制曲线的弧度 |
| T = smooth quadratic Bézier curveto平滑的二次贝塞尔曲线 | x,y | 从当前画笔位置绘制一条二次贝塞尔曲线到参数（x,y）指定的坐标。控制点被假定为最后一次使用的控制点 |
| A = elliptical Arc椭圆弧线 | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同时有效果。large-arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向 |
| Z = closepath闭合路径 | 无 | 从结束点绘制一条直线到开始点，闭合路径 |
注意：
- 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
栗子2
- defs元素是一个容器，defs是definitions的缩写。
- defs元素用于预定义一个元素使其能够在SVG图像中重复使用。
- 在defs元素中定义的图形不会直接显示在SVG图像上，要显示它们需要使用use元素来引入它们。
- 要引用g元素，必须在g元素上设置一个ID，通过ID来引用它。
- use元素通过xlink:href属性来引入g元素。
- 在use元素中，通过x和y属性来指定重用图形的显示位置。
- 在g元素中的图形的定位点都是0,0，在使用use元素来引用它的时候，它的定位点被转换为use元素x和y属性指定的位置。
SVG滤镜
SVG滤镜的原理
SVG在使用了滤镜的元素里，不会将原始图形直接渲染出来，而是会将原始图形的像素信息渲染到临时位图中，然后由filter元素指定的操作会被应用到这个临时位图，最终把计算结果渲染为最终图形输出。• SVG可用的滤镜有：
• feBlend - 与图像相结合的滤镜 • feColorMatrix - 用于彩色滤光片转换 • feComponentTransfer • feComposite • feConvolveMatrix • feDiffuseLighting • feDisplacementMap • feFlood • feGaussianBlur - 定义模糊效果 • feImage • feMerge • feMorphology • feOffset - 过滤阴影，创建阴影效果 • feSpecularLighting • feTile • feTurbulence • feDistantLight - 用于照明过滤 • fePointLight - 用于照明过滤 • feSpotLight - 用于照明过滤 • 除此之外，可以在每个 SVG 元素上使用多个滤镜！举个栗子-阴影效果1
- 所有互联网的SVG滤镜定义在defs元素中。
- in="SourceGraphic"定义了由整个图像创建效果。
- stdDeviation="15"定义模糊程度，值越大，模糊效果越强，并且可以接受两个数字，分别为X和Y方向的模糊度。
- 可以指定SourceAlpha为它的输入源，如果不指定将在原色值上做模糊。
- filter滤镜属性用来把元素链接到滤镜，如filter="url(#f1)"，把元素链接到id为f1的滤镜。
举个栗子-阴影效果2
参见SVG渐变
- 渐变是从一种颜色到另一种颜色的平滑过渡。
- SVG渐变可以把多个颜色的过渡应用到同一个元素上。
- SVG渐变主要有Linear(直线)和Radial(放射)两种类型：
SVG线性渐变linearGradient
- linearGradient元素用于定义线性渐变。
- linearGradient标签必须嵌套在defs标签的内部。
- linearGradient标签的id属性可为渐变定义一个唯一的名称。
- linearGradient标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置。
- 渐变的颜色范围可由两种或多种颜色组成。
- 每种颜色通过一个stop标签来规定。
- offset属性用来定义渐变的开始和结束位置。
- fill填充属性把渐变应用到相应元素。
线性渐变可以定义为水平、垂直或角渐变：
当y1和y2相等，而x1和x2不同时，可创建水平渐变 当x1和x2相等，而y1和y2不同时，可创建垂直渐变 当x1和x2不同，且y1和y2不同时，可创建角形渐变
小栗子
SVG放射性渐变radialGradient
- radialGradient元素用于定义放射性渐变。
- radialGradient标签必须嵌套在defs的内部。
- radialGradient标签的 id 属性可为渐变定义一个唯一的名称。
- cx/cy和r属性定义的是最外层的圆；fx和fy定义的是最内层的圆。
- 渐变颜色范围可以由两个或两个以上的颜色组成。
- 每种颜色用一个stop标签指定。
- offset属性用来定义渐变色开始和结束。
- fill填充属性把渐变应用到相应元素。
小栗子
SVG运动动画
set元素
set元素本身没有动画效果，但可以在特定时间之后修改某个属性值（也可以是CSS属性值）。小栗子
animate元素
animate基础动画元素。小栗子
animateTransform元素
animateTransform元素可以实现transform变换动画效果的。与css3中transform变换基本一样。小栗子
animateMotion元素
animateMotion元素可以让SVG各种图形沿着特定的path路径运动。小栗子