SVG(Scalable Vector Graphics)
可伸缩矢量图形，它是用XML格式来定义用于网络的基于矢量的图形，它的特点是**图像在放大或改变尺寸的情况下其图形质量不会有所损失，同时他和DOM一样都是W3C的一个标准。
位图和矢量图
位图，也就是我们经常能看到的图片，它是一个平面上密集排布的点的集合，也就是说它是由一个个点构成的。对它进行放大那么相对应的点就会进行放大，这样就会让图片显得十分不清晰。
矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。
SVG代码解析
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
- 第一行包含了XML声明。standalone属性规定此SVG文件是否“独立”，是否引用外部文件。standalone="no" 意味着 SVG 文档会引用一个外部文件。栗子中引用了DTD文件。
- 第二引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于W3C，含有所有允许的SVG元素。
- svg标签是SVG 代码的根元素。
SVG栗子
栗子1
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
<style>
svg{display:block;}
</style>
</head>
<body>
<!-- 圆形circle -->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
<!-- 椭圆ellipse -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>
<!-- 矩形rect -->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-5;opacity:0.5"/>
</svg>
<!-- 线line -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-2"/>
</svg>
<!-- 多边形polygon -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-1"/>
</svg>
<!-- 折线polyline 用于创建任何只有直线的形状 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-3" />
</svg>
<!-- 路径path -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
<!-- 文本text -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="0" dx="10,20,30,40,60" dy="10,20,30,40,50,60">This is some SVG Text<text>
</svg>
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="20" rotate="0,45,0,90,180,0">This is some SVG Text</text>
</svg>
</body>
</html>
- 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闭合路径 | 无 | 从结束点绘制一条直线到开始点，闭合路径 |
注意：
- 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
- 深度掌握SVG路径path的贝塞尔曲线指令
栗子2
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<g id="shape">
<circle cx="50" cy="50" r="50" fill="blue" />
<rect x="50" y="50" width="50" height="50" fill="red" />
</g>
</defs>
<use xlink:href="#shape" x="0" y="0" />
<use xlink:href="#shape" x="150" y="0" />
</svg>
- 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 id="test" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="400">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect x="20" y="20" rx="5" ry="5" width="750" height="325" fill="green" filter="url(#f1)" />
</svg>
<!--图形非常模糊，原因是滤镜返回的是一个模糊过的阿尔法通道，并不是原始图形。另外浏览器里查看图形，可以明显的看到滤镜对象的边界不同于原始对象的边界，它的默认值为X等于-10%，Y等于-10%，宽120%，高120%。这其实是为滤镜提供了额外的空间，产生的输出大于输入区域。改进版看栗子*阴影效果2*-->
- 所有互联网的SVG滤镜定义在defs元素中。
- in="SourceGraphic"定义了由整个图像创建效果。
- stdDeviation="15"定义模糊程度，值越大，模糊效果越强，并且可以接受两个数字，分别为X和Y方向的模糊度。
- 可以指定SourceAlpha为它的输入源，如果不指定将在原色值上做模糊。
- filter滤镜属性用来把元素链接到滤镜，如filter="url(#f1)"，把元素链接到id为f1的滤镜。
举个栗子-阴影效果2
参见svg滤镜学习
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 xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="60%" style="stop-color:blue;stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
SVG放射性渐变radialGradient
- radialGradient元素用于定义放射性渐变。
- radialGradient标签必须嵌套在defs的内部。
- radialGradient标签的 id 属性可为渐变定义一个唯一的名称。
- cx/cy和r属性定义的是最外层的圆；fx和fy定义的是最内层的圆。
- 渐变颜色范围可以由两个或两个以上的颜色组成。
- 每种颜色用一个stop标签指定。
- offset属性用来定义渐变色开始和结束。
- fill填充属性把渐变应用到相应元素。
小栗子
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
<stop offset="50%" style="stop-color:rgb(255,255,0); stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
SVG运动动画
set元素
set元素本身没有动画效果，但可以在特定时间之后修改某个属性值（也可以是CSS属性值）。
小栗子
<svg width="520" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="60" y="160" x="160">
GOGOGO
<set attributeName="font-size" attributeType="XML" to="30" begin="3s" />
<set attributeName="x" attributeType="XML" to="30" begin="3s" />
</text>
</g>
</svg>
animate元素
animate基础动画元素。
小栗子
<svg width="520" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="60" y="160" x="160">
GOGOGO
<animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
<animate attributeName="font-size" from="60" to="20" begin="0s" dur="5s" repeatCount="indefinite" />
</text>
</g>
</svg>
animateTransform元素
animateTransform元素可以实现transform变换动画效果的。与css3中transform变换基本一样。
小栗子
<svg width="520" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="40" y="160" x="160">
GOGOGO
<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="0.5" to="1.5" repeatCount="indefinite"/>
</text>
</g>
</svg>
animateMotion元素
animateMotion元素可以让SVG各种图形沿着特定的path路径运动。
小栗子
<svg width="560" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">人
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/>
</text>
<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>