2018-07-11svg

这是一个很长的故事

其实没有很长，所以从头讲起。
svg的全称是可缩放 矢量 图形（Scalable Vector Graphics，SVG)，是一种用来描述二维矢量图形的 XML 标记语言。

1. 通过设定svg图片的width， height，viewbox, svg可以任意缩放。
2. svg是矢量的，所以在任意缩放后不必担心分辨率。
3. 在icon界，svg开始慢慢代替图片。

---

画一幅袅袅炊烟

袅袅炊烟

svg的画布和Canvas的差不多，以页面的左上角为（0，0）坐标点，坐标以像素为单位，x轴向右，y轴向下。

1. 画炊烟

<svg version="1.1" width='300' height='300' xmlns='http://www.w3.org/2000/svg'>
  <ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
</svg>

炊烟

ellipse 是用作画椭圆，属性包括

属性名	全称	意义
cx	The x position of the center of the ellipse	椭圆中心的x位置
cy	The y position of the center of the ellipse	椭圆中心的y位置
rx	The x radius of the ellipse	椭圆的x半径
ry	The y radius of the ellipse	椭圆的y半径

circle 用作绘制圆形。初中的数学告诉我们，圆是一种特殊形状的椭圆，是rx，ry相等的椭圆。所以属性比椭圆少一个。

属性名	全称	意义
cx	The x position of the center of the ellipse	圆心的x位置
cy	The y position of the center of the ellipse	圆心的y位置
r	The x radius of the ellipse	圆的半径

2. 画烟囱

<svg version="1.1" width='300' height='300' xmlns='http://www.w3.org/2000/svg'>
  <ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="transparent" stroke-width="5"/>
</svg>

+烟囱

rect 是用作画椭圆，属性包括

属性名	全称	意义
x	The x position of the top left corner of the rectangle	矩形左上角的x位置
y	The y position of the top left corner of the rectangle	矩形左上角的y位置
rx	The x radius of the corners of the rectangle	圆角的x方位的半径
ry	The y radius of the corners of the rectangle	圆角的y方位的半径
width	The width of the rectangle	矩形的宽度
height	The height of the rectangle	矩形的高度

3.画门脚的线

<svg version="1.1" width='500' height='500' xmlns='http://www.w3.org/2000/svg'>
  <ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="transparent" stroke-width="5"/>
  <line x1="4"  y1="360" x2="310" y2="360" stroke="black" stroke-width="5" />  
</svg>

+门前的线

line 是用作画直线，必须属性包括

属性名	全称	意义
x1	The x position of point 1	起点的x位置
y1	The y position of point 1	起点的y位置
x2	The x position of point 2	终点的x位置
y2	The y position of point 2	终点的y位置
stroke	The color used to paint the outline of the shape	线段颜色

line 必须设定stroke属性，设定直线的颜色。否则直线是不可见的。

4. 画房子

<svg version="1.1" width='500' height='500' xmlns='http://www.w3.org/2000/svg'>
  <ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/> 
  <line x1="4"  y1="360" x2="310" y2="360" stroke="black" stroke-width="5" />
  <polyline points="60 213, 10 260, 190 267, 230 186, 93 186, 10 260, 30, 261, 35 360, 70 360, 70 300, 100 300, 100 360, 180 360, 180 267, 180 360, 250 345, 250 250, 250 270, 270 250, 232 186," fill="none" stroke="black" stroke-width="5" />
  <rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="#fff" stroke-width="5"/>
</svg>

+房子

polyline用来画一组连接在一起的直线。属性包括：

属性名	全称	意义
points	This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline	点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

注意：react移动到最后，这是因为元素的渲染顺序。SVG文件全局有效的规则是“后来居上”，越后面的元素越可见。所以让烟囱覆盖在房子上。

5. 画窗户

<svg version="1.1" width='500' height='500' xmlns='http://www.w3.org/2000/svg'>
  <ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/> 
  <line x1="4"  y1="360" x2="310" y2="360" stroke="black" stroke-width="5" />
  <polyline points="60 213, 10 260, 190 267, 230 186, 93 186, 10 260, 30, 261, 35 360, 70 360, 70 300, 100 300, 100 360, 180 360, 180 267, 180 360, 250 345, 250 250, 250 270, 270 250, 232 186," fill="none" stroke="black" stroke-width="5"   />
  <rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="#fff" stroke-width="5"/>
  <polygon points="203 273, 203 314, 237 304, 237 265"  fill="none" stroke="black" stroke-width="5"/>
</svg>

+窗子

polygon 和polyline很像，区别是polygon在最后一个点处自动回到第一个点。属性包括：

属性名	全称	意义
points	This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline	点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

6. 画树

<svg version="1.1" width='500' height='500' xmlns='http://www.w3.org/2000/svg'>
  <ellipse cx="241" cy="25" rx="38" ry="9" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="156" cy="61" rx="30" ry="12" stroke="black" fill="transparent" stroke-width="5"/>
  <ellipse cx="90" cy="103" rx="30" ry="16" stroke="black" fill="transparent" stroke-width="5"/> 
  <line x1="4"  y1="360" x2="310" y2="360" stroke="black" stroke-width="5" />
  <path d="M302 162 Q 200 300, 300 300 Q 400 300,300 162 M 294 345 Q 300 340,300 220 M 300 275 Q 300 255, 280 230 M 300 275, Q 300 275, 324 242" stroke="black" fill="#fff" stroke-width="5" />
  <line x1="250"  y1="345" x2="407" y2="345" stroke="black" stroke-width="5" />
  <polyline points="60 213, 10 260, 190 267, 230 186, 93 186, 10 260, 30, 261, 35 360, 70 360, 70 300, 100 300, 100 360, 180 360, 180 267, 180 360, 250 345, 250 250, 250 270, 270 250, 232 186," fill="#fff" stroke="black" stroke-width="5"   />
  <rect x="60" y="155" rx="5" ry="5" width="33" height="81" stroke="black" fill="#fff" stroke-width="5"/>
  <polygon points="203 273, 203 314, 237 304, 237 265"  fill="none" stroke="black" stroke-width="5"/>
  
  
</svg>

+一棵树

path 有很强大的功能，支持画直线，曲线。虽然属性只有一个d，但是d里值大有学问， 它是一个“命令+参数”的序列。

属性名	全称	意义
d	A list of points and other information about how to draw the path.	一个点集数列以及其它关于如何绘制路径的信息。

直线命令名	全称	例子	意义
M	Move to	M x y	移动到点(x,y)，不画线
L	Line to	L x y	将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段
H	Horizontal lines	H x	绘制平行线
V	Vertical lines	V x	绘制垂直线
Z	Close Path	Z	从当前点画一条直线到路径的起点

曲线命令名	全称	例子	意义
C	Cubic Bézier curves	C x1 y1, x2 y2, x y	三次贝塞尔曲线, (x y)是重点坐标，其余是控制点坐标
S	A shortcut version of the cubic Bézier	S x2 y2, x y	1.如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。2. 如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。 3.(x y)是重点坐标，其余是控制点坐标
Q	Quadratic Bézier curves	Q x1 y1, x y	二次贝塞尔曲线， (x y)是重点坐标，其余是控制点坐标
T	A shortcut version of the quadratic Bézier	T x y	1.T命令跟着一个Q命令，或者是另一个T命令，通过前一个控制点，推断出一个新的控制点，创建出一个相当复杂的曲线。2.如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。3. (x y)是重点坐标
A	Arcs	A rx ry x-axis-rotation large-arc-flag sweep-flag x y	（rx,ry）是弧形x轴半径和y轴半径，x-axis-rotation是x轴旋转角度，large-arc-flag是角度大小，决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。 sweep-flag是弧线方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧

注意：
1.每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位。Z 命令除外，不区分大小写。
2.贝塞尔曲线的内容可以参考wiki

终于介绍完所有的元素了。

---

VSCODE 插件

SVG

这个插件提供了输入提示，图片预览(Preview)， 压缩(Minify)这几个功能。压缩功能会将从sketch导出的svg文件中，例如id等内容去除，压缩大小。

SVG viewer

这个插件也提供了图片预览功能，并且在vs code设置中设置

"svgviewer.enableautopreview": true,

可以自动打开svg图片。

---

本集内容包括：基本元素的介绍，这样当我们看到svg时，可以了解这常常的字符串是说了什么。再来介绍了vscode中插件，方便我们在开发中可以直观的看到svg图形。
下集预告： 装饰房子
参考：
Things you need to know about working with SVG in VS Code