Skecth Learning中的SVG

文章转自永永夜

SVG 简介

在 Sketch(草图)研究中,我们经常会遇到 SVG 格式的图像文件。和 PNG 不同,SVG是一种矢量图,它可以保存草图绘图过程中每个笔画的坐标信息。所以,理解 SVG 对于研究草图是很有意义的。

PNG 实际上是像素点,是一个矩阵,比如 RGB 三通道的 224 * 224 像素的一张 PNG 图片,就是一个 224 * 224 * 3 的实数矩阵。但是 SVG 则是一门编程语言,是使用 XML 来描述二维图形和绘图程序的语言。也就是说,SVG文件实际上就是一些 XML 代码,所以我们要理解 svg ,就是要理解这些 XML 代码。

SVG 中包含了矩形,圆形,路径等多种组成元素,分别对应
等标签,每个标签都有自己的一些属性,比如 中 cx 和 cy 属性定义圆点的 x 和 y 坐,r 属性定义圆的半径。但是对于 Sketch,我们并主要理解 就够了,因为草图的笔画都是通过 来存储的。path 元素的形状通过属性 d 来定义,属性 d 的值是一个 “命令+参数” 的序列。下面将介绍 的一些命令:

直线命令

  • M = moveto
    【Move to】需要两个参数,分别是需要移动到的点的x轴和y轴的坐标。类似于移动画笔的位置。一般 M 会表示一个笔画的开始。
M x y //绝对位置
m dx dy //相对位置。后续提到其他命令雷同,故省略不再赘述。
   
   
   
   
  • 1
  • 2
  • L = lineto
    【Line to】需要两个参数,分别是一个点的x轴和y轴坐标,L命令将会在当前位置和新位置(L前面画笔所在的点)之间画一条线段。

  • H = horizontal lineto
    H 【绘制平行线】

  • V = vertical lineto
    V【绘制垂直线】
    这两个命令都只带一个参数,标明在x轴或y轴移动到的位置,因为它们都只在坐标轴的一个方向上移动

  • Z = closepath
    Z 【闭合路径】
    Z命令会从当前点画一条直线到路径的起点。不区分大小写

曲线命令

  • C = curveto
    三次贝塞尔曲线。(x,y)表示的是曲线的终点,(x1,y1)是起点的控制点,(x2,y2)是终点的控制点。
    控制点描述的是曲线起始点的斜率,曲线上各个点的斜率,是从起点斜率到终点斜率的渐变过程。
C x1 y1, x2 y2, x y
   
   
   
   
  • 1

下面还有一些其他命令就不再贴解释了,有兴趣的可以在 svg之详解 中去了解。
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc

在 Sketch 中,一般只有 M 和 C 两种命令。所以只需要理解这两种命令应该就够了。

你可能感兴趣的:(程序人生,机器学习)