SVG 基础属性与应用
SVG：Scalable Vector Graphics，可伸缩矢量图形
前言
为了在网络设备上传播各种声音、图像等媒体文件，有了各种针对不同需求的文件格式——图片、视频、音频等都有各种格式，应对高效传输、低空间占用、各类媒体中传输使用等场景。
图片，就有许多格式，例如普通用户最为熟悉的 JPEG、PNG、GIF。尽管这些格式与大家经常见面，但普通用户根本不知道这些图片格式的区别与作用。这里简单说一下，JPEG 是有损压缩，对原图实行大幅度的压缩，以减少图片的空间占用，但同时也会对画质产生较大的影响。PNG 格式的图片可以理解为类似剪纸，没有图像的区域是透明的，可以与背景有效融合。有时你会在某些地方看到透明头像，使用的就是 PNG 格式的图片。至于 GIF ，相信大家都熟悉，就是一个短暂的高压缩的动图，大家在某些软件的搞笑区或者社交软件的斗图区看得很多。
除上述格式，还有 PSD 类似的图片格式，有特殊用途，PSD 主要用于 PS 软件，保存高保真的图片，一般是商业化使用，其他软件基本不支持。
但今天的主题并不是以上这些格式。为了数字媒体的网络化传播，许多图像公司参与了 SVG 格式的标准制定。除此之外，人们发现，上面的图片格式在网络中传播时，要么是会因为放大模糊，要么是本身压缩得太厉害，或者是本身就很大，在一些场景下不是特别适用，比如放大画质不损失，且要求空间占用小的时候。
这种放大图像不模糊的形式类似于 PDF 文档。
为了满足上述需求，2003 年，W3C 与苹果、柯达、IBM、Adobe 等公司一起制定了 SVG 矢量图形标准。SVG 使用 XML （可扩展标记语言）定义图像，通过一系列参数在设备显示屏上规定图像的坐标，坐标矢量便会连接绘制出图像，放大缩小不影响画质。
因为使用 XML，SVG 图像很容易在 HTML 网页中使用。
一、HTML 中使用 SVG
需要强调的是，HTML 中使用的 SVG 的代码一般是专业的绘图软件自动生成的，在使用时只需要引入就好，SVG 的标签与属性非常繁杂，没有必要进行记忆，只需记忆一些常用属性，在实际开发中可以修改属性改变样式即可。
1. embed 标签
语法：
<embed src="circle1.svg" type="image/svg+xml" />
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
该方法不常用。
2. object 标签
语法：
<object data="circle1.svg" type="image/svg+xml"></object>
优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
缺点：不允许使用脚本。
该方法不常用。
3. iframe 标签
语法：
<iframe src="circle1.svg"></iframe>
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
该方法不常用。
4. SVG 代码
语法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
该方法是最常用的方法，使用 SVG 标签如同普通的 HTML 标签，并且可以对 SVG 图像进行更改，只需要更改相关参数即可。但该方法需要对相关标签与属性熟练掌握。
二、SVG 相关标签与属性
SVG 使用 <svg> 标签定义图形的绘制区域，要绘制的图形就写在 <svg> 标签中。其可以设置宽高等属性，viewBox 属性用于设置 SVG 盒子，其有四个参数，例如：
<svg width="200" height="200" viewBox="50 50 50 50"></svg>
其中前两个参数是 SVG 盒子的起始坐标，后两个代表盒子的宽高。
1. 矩形
语法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>
xmlns 是 XML 的语法，规定一个命名空间，用于防止同名原素带来的歧义。
矩形使用标签 <rect> 定义，其中 x、y 表示开始绘制的横纵坐标，width 与 height 表示图形的宽高。
2. 圆形
语法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
圆形使用 <circle> 标签定义，cx、cy 表示圆心坐标，r 表示圆的半径。stroke 表示图形的边框，所有图形都可以使用该属性。与 CSS 中的 border 类似，后面会介绍它的相关属性。
3. 椭圆
语法：
<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>
椭圆使用 <ellipse> 标签定义，属性与圆类似，不同的地方在于半径 r 的属性设置不同。椭圆使用 rx、ry 进行设置。fill 属性意为 “填充”，指图形的填充模式，类似于背景色。
4. 直线
语法：
<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-width:2"/>
</svg>
直线使用 <line> 标签定义。两点确定一条直线，其中 x1、y1 是第一个点的坐标，x2、y2 是第二个点的坐标。这里的 stroke-width 定义线段的宽度。
5. 多边形
语法：
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
折线使用 <polygon> 标签进行定义，points 属性用于设置每个顶点的坐标。
6. 折线
语法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
折线使用 <polyline> 标签进行定义，points 属性用于设置每个折点的坐标。fill 设置折线的填充，一般设为 none，不设置的话会是黑色，填充为多个多边形。
7. 路径
语法：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
</svg>
路径使用 <path> 定义，用于绘制复杂的图形。id 表示路径的唯一身份，d 表示路径的绘制方式。有以下属性：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
8. 文本
语法：
<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 图形的标签，当然，还有很多标签，例如 <a> 标签建立一个连接，<defs> 建立一个容器，类似 <template>。但是这些标签繁杂难记，不必刻意去记忆，需要时查阅手册即可，使用熟练即可记住。
三、SVG 特效
由于这些属性都非常复杂难记，所以不会详细讲解，仍然建议遇到时查手册即可。
1. 滤镜
SVG 大部分特效都是通过滤镜完成的。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--容器-->
<defs>
<!--滤镜-->
<filter id="f1" x="0" y="0" width="200%" height="200%">
<!--过滤阴影-->
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<!--与图像结合的滤镜-->
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
2. 渐变
渐变分线性渐变与放射渐变，与 CSS 类似。
线性渐变
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);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 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="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
这里的 <stop> 表示渐变停止的位置。offset 表示偏移量，stop-color 表示停止渐变后的颜色。
3. stroke
stroke，意为行程
stroke 有以下属性：
stroke
stroke-width
stroke-linecap
stroke-dasharray
stroke
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="blue" d="M5 40 l215 0" />
<path stroke="black" d="M5 60 l215 0" />
</g>
</svg>
stroke-linecap
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
定义 path 绘制的线条的终端的样式，butt 是会把两端截掉一点，round 是半圆平滑，类似于 border-radius: 50%，square 是方形。
stroke-dasharray
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
g 标签，用于把元素组合的标签
结语
实际应用中，美工会将设计好的 SVG 图片转换为 XML 代码，开发时直接复制过来使用，若有什么可以修改的，找到相关参数修改即可。
复杂难记的属性可以翻阅手册，使用多了便会记住。
