When creating an SVG path, typically the capital letters (M, L...) in the d attribute refer to absolute coordinates and the lower case letters (m, l...) refer to relative coordinates to the last point.

Here's an example that draws a small right triangle in absolute coordinates:

<path style="stroke:black;fill:none;" d="M100,100 L150,100 V50 Z" />

This draws the same triangle in relative coordinates:

<path style="stroke:black;fill:none;" d="m100,100 l50,0 v-50 z" />

I can use a capital or lowercase M and Z in either case and visually, nothing is changed. Regarding M, I assume that since it is the first point, it is absolute or relative to (0, 0), but please correct me if that is wrong. What is the difference of z and Z?

CodePudding user response：

Both z and Z define the Path Command: ClosePath

Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.

SVG defines 6 types of path commands, for a total of 20 commands:

• MoveTo: M, m
• LineTo: L, l, H, h, V, v
• Cubic Bézier Curve: C, c, S, s
• Quadratic Bézier Curve: Q, q, T, t
• Elliptical Arc Curve: A, a
• ClosePath: Z, z

CodePudding user response：

In all cases:

An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position. path_commands

But in the case of z/Z, there is no difference (ClosePath). There is no absolute or relative coordinate associated with the z/Z, so it will just create a straight line between the last point and the starting point.