Perl画图：SVG基础篇（附资料下载） |

发布于 2018年3月22日

记得当年做技术时，经常会遇到老师要改图形格式的问题，如，BMP格式、WMF格式、TIFF格式、JPEG格式、SVG格式、AI格式、PNG格式、GIF格式等等，图形格式太多，搞得我“老虎老鼠，傻傻分不清楚~~”，秉承“知其然知其所以然”的科研心态，我决定从基础的开始学起。

童鞋们,咱们走起……？

一、什么是SVG？
svg的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。SVG 使用 XML 格式定义图形。

二、SVG的优势
1. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强；
2. SVG 图像可在任何的分辨率下被高质量地打印；
3. SVG 可在图像质量不下降的情况下被放大；
4. SVG 易读取和修改。

三、SVG预定义的元素介绍
形状元素:

非形状元素:

四、SVG的共有属性

五、图形代码示例
矩形 <rect>
<rect> 标签用于创建矩形和圆角矩形

（x，y)是矩形左上角坐标，默认是（0，0）；
（width，height）是矩形的宽度和高度；
（rx，ry）是矩形圆角的水平半径和垂直半径。
代码示例：

代码示例：

圆形 <circle>
<circle> 标签用于创建一个圆
（cx，cy）是圆心坐标，默认是（0，0）；
r 是圆的半径。
代码示例：

椭圆 <ellipse>
<ellipse> 标签用于创建一个椭圆；
（cx，cy）是椭圆中心点的坐标，默认是（0，0）；
（rx，ry）是水平半径和垂直半径。
代码示例：

线 <line>
<line> 标签用于创建一个线条；
（x1，y1）是线条的起始坐标，默认是（0，0）；
（x2，y2）是线条的终止坐标，默认是（0，0）。
代码示例：

折线 <polyline>
<polyline> 标签用于创建任何只有直线的形状；
points 属性定义折线每个点的坐标（x，y），用空格分隔每个点。
points的定义形式有两种：
points=”x1,y1 x2,y2 ……”
points=”x1 y1 x2 y2 ……”
代码示例：

多边形 <polygon>
<polygon> 标签用来创建含有不少于三个边的图形。多边形是由直线组成，其形状是“封闭”的（所有的线条连接起来）。
points 属性定义折线每个点的坐标（x，y），用空格分隔每个点，头尾自动相连。
points的定义形式有两种：
points=“x1,y1 x2,y2 ……”
points=“x1 y1 x2 y2 ……”
fill 属性和折线的fill是一样的，填充的是首尾相连后的形状的内容
代码示例：

路径 <path>
<path> 标签用于定义一个路径
d用来定义每个关键点的路径数据；以下标记用来修饰路径数据，所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
直线命令
M = moveto(M X,Y)
需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。类似于移动画笔的位置

L = lineto(L X,Y)
需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段

H = horizontal lineto(H X)
画水平线到指定的X坐标位置

V = vertical lineto(V Y)
画垂直线到指定的Y坐标位置
H,V这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)
(x,y)表示的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。

有点抽象，可以看一下例子
建议自己写下代码看看效果，代码示例：

S = smooth curveto(S X2,Y2,ENDX,ENDY)
当一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变），可以使用S命令。简写的贝塞尔曲线命令。
如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。

继续扔一个栗子来看看。
【注意】蓝色部分是对称的控制点，代码示例：

Q = quadratic Bézier curve(Q X,Y,ENDX,ENDY)
二次贝塞尔曲线Q，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。

继续例子，代码示例如下：
（注，代码中表示点的位置没写）

效果图，path是黑色曲线

T = smooth quadratic Bézier curveto(T ENDX,ENDY)
与S命令相似，是Q命令的简写命令。与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。
【需要注意】，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。

代码示例：