Please explain SVG Path Commands and Coordinates

Question

In an SVG file, I found a path which looks like this:

<path id="kvg:0548b-s7" kvg:type="㇐b" d="M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13"/>

Can somebody explain what the coordinates 48.38c5.65-0.95 and 18.92-3.42c2.05-0.45 represent?

Answer 1

I think that some of the confusion comes from the tricks the format allows for separating individual parameters to the various path operands. So in the example:

M65.32,48.38c5.65-0.95,12.61-2.46,18.92-3.42c2.05-0.45,4.13-0.5,6.23-0.13

You see parameters

• separated by commas as in M(ove)65.32,48.38 ...
• separated by hyphens (minus signs) as in c(ubic bezier)2.05-0.45 ...
• delimited by new operands as in ...48.38c5.65...
• you'll also see parameters delimited by white space instead of commas
• you might even see parameters delimited by a leading period if the preceding parameter had a period in it
• Sometimes you will see parameters in scientific notation as in 3.22e-9 to eliminate zeros

As each kind of operand needs exactly a certain number of parameters (M,L,T need 2; H,V need 1; Q,S need 4; C needs 6; A needs 7; and Z needs 0) you will see situations where operands are omitted. If you see a L with 4 parameters after it, it actually means 2 lines, a C with 18 parameters after it means 3 cubic Beziers.

This is all to minimize any wasted space in the SVG, and not just to make it hard to read.

Answer 2

The d attribute for an SVG's <path> tag contains a series of instructions or descriptions, that are processed to create the SVG's overall shape. These instructions can be of different types:

1. Moveto :: restart the path somewhere else (M or m syntax)
2. Lineto :: draw a straight line (L or l syntax, or H and V, or h and v)
3. Curveto :: draw a cubic Bezier curve (C or c syntax)
4. Arcto :: draw an elliptical curve (A or a syntax)
5. ClosePath :: draw a straight line to the opening point of the path (Z or z syntax)

Uppercase letter syntax means that absolute position values are given. Lowercase syntax means that relative position values follow, meaning, that the subsequent coordinate is found down and to the right from the current control point.

The instructions provided in the d attribute for your SVG, begin with an uppercase M, which signifies absolute position values for a Moveto command. But there are also lowercase c commands present, which signify relative values for a Curveto instruction set.

Regarding the first coordinates you are asking about...

Moveto commands have two arguments. In the first segment of the first value you are inquiring about, 48.38 is the y axis parameter (which follows the x parameter of 65.32) for the Moveto command. The remaining c5.65-0.95 is the beginning of a new Curveto instruction set.

Curveto commands have three arguments, made up of x and y pairs, each separated by a dash (-). As it is given with a lowercase c, the values that follow are relative. The first pair is the control point that begins the curve, the second is the control point that ends the curve, and the third is the coordinate that defines the current point from which the curve begins.

Regarding the second set of coordinates you are asking about...

The 18.92-3.42 is the current point (third argument) defined by the first Curveto command, and the c2.05-0.45 is first argument of the next Curveto command that controls the beginning of that bezier curve.

The dots, in these values, are decimal points.

If you take the d attribute and break it apart, according to the number of arguments defined in documentation, per command, the instruction set becomes much more readable.

For more information on the d attribute, see here and here.

For further information on bezier curves, see here.