What is Sketch learning-svg?

Introduction to SVG

In Sketch (sketch) research, we often encounter image files in SVG format. Unlike PNG, SVG is a vector diagram that holds the coordinates of each stroke in a sketch drawing. So, understanding SVG is very useful for studying sketches.

PNG is actually a pixel, is a matrix, such as RGB three-channel 224 * 224 pixel of a PNG picture, is a 224 * 224 * 3 of the real matrix. But SVG is a programming language, the language that uses XML to describe two-dimensional graphics and drawing programs . That is to say, the SVG file is actually some XML code, so we have to understand SVG to understand these XML code.

SVG contains a variety of elements, such as rectangles, circles, paths, and so on, respectively, corresponding
<rect> <circle> <path> and so on, each tag has its own properties, such as <circle> in the CX and Cy properties to define the circle point x and Y sit, R property defines the radius of the circle. But for Sketch, we have a major understanding of <path>, because the strokes of sketches are stored through <path>. The shape of the path element is defined by attribute D, and the value of attribute D is a sequence of "command + parameters". Some of the commands described below are: line command M = MoveTo
Move to requires two parameters, which are the coordinates of the x and Y axes of the point to which you are moving. Similar to the position of the move brush. General M will represent the beginning of a stroke.

m x y//absolute position
m dx dy//relative position. Subsequent mention of other orders are identical, so omitted no longer repeat.

L = LineTo
Line to requires two parameters, namely the x and Y coordinates of a point, and the L command draws a segment between the current position and the point where the previous brush is located.

H = Horizontal LineTo
H "Draw Parallel Lines"

V = Vertical LineTo
V "Draw Vertical Line"
Both commands take only one argument, indicating where the x-axis or y-axis is moved, because they move only in one direction of the axis

Z = Closepath
Z "Closed Path"
The z command draws a straight line from the current point to the starting point of the path. Case-insensitive curve command C = Curveto
three times Bezier curve. (x,y) is the endpoint of the curve, (x1,y1) is the control point of the starting point, (X2,Y2) is the endpoint's control point.
The control point describes the slope of the starting point of the curve, and the slope of the points on the curve is the gradient from the slope of the start to the end slope.

C x1 y1, x2 y2, x y

Here are some other commands that are no longer explained, interested in the SVG to understand the detailed.
-S = Smooth Curveto
-Q = Quadratic belzier curve
-T = smooth quadratic belzier curveto
-A = Elliptical ARC

in Sketch, only the M and C two commands are generally available. so the only way to understand these two commands should be enough.