SVG Path

Meaning of SVG Path

The coodinate system is positive towards the right and downwards. The coordinates are in the form of (x, y), in which x is the horizontal coordinate and y is the vertical coordinate.

M24 24 v-24 a12 12 0 1 0 0 24 h48 a12 12 0 0 1 0 -24 h-48 z

M means move. M24 24 means move to (24, 24)

v means vertical. v-24 means draw a vertical line towards the negative direction (up) for 24 points. Pointer has gone from (24, 24) to (24, 0).

a means arc. Parameters are (rx ry x-axis-rotation large-arc-flag sweep-flag x y).

• rx ry are the radii of the ellipse. When rx = ry, the ellipse will be a circle
• x-axis-rotation is the degree of rotation of the ellipse with respect to the x-axis
• x y are not coordinates but the position vector from current point to destined point.
• large-arc-flag and sweep-flag determines clockwise or counterclockwise the arc is drawn from current point to destined point. 0 1 is counterclockwise. 1 0 is clockwise.

For a12 12 0 1 0 0 24, it means draw an arc with radii 12, 12 clockwise from current point (24, 0) to (24+0, 0+24) = (24, 24).

h means horizontal. h48 means draw a horizontal line towards the positive direction (right) for 48 points. Pointer has gone from (24, 24) to (72, 24).

For a12 12 0 0 1 0 -24, it means draw an arc with radii 12, 12 counterclockwise from current point (72, 24) to (72+0, 24-24) = (72, 0).

h-48. Pointer has gone from (72, 0) to (24, 0). The resulting graphic will be