Question

This is a two-part question:

1. Does the first code section below (produced by Adobe Illustrator) represent
   a Cubic Bezier Curve in an SVG file?

2. If so, what do each of the numbers following the lower-case Cs represent in the first (Adobe Illustrator) example?

   Adobe Illustrator Example:

<path style="fill:none;stroke:#00FF00;stroke-width:0.5102;stroke-linecap:round; stroke-linejoin:round;" d="M223.827,404.942 c-6.741,6.32-7.083,16.908-0.762,23.649l0,0c0.184,0.201,0.561,0.577,0.762,0.762" />

Here is part of an example from w3:

<path class="SamplePath" d="M100,200 C100,100 250,100 250,200
                                       S400,300 400,200" />

In the second W3 example, I understand the numbers following the ‘M’ refer to the starting x,y coordinates and that the upper case ‘C’s indicate absolute positioning. The pattern seems fairly obvious in the W3 example regarding the groupings of XYs. However, I don’t know what to make of the Adobe Illustrator example with the groups seperated by a negative sign and no comma, e.g.,: 16.908-0.762. How are the numbered sequences that follow the lower-case Cs in the Adobe Illustrator example parsed and grouped, and what do each of those numbers represent in the first (Adobe Illustrator) example?

Answer 1

The answer to 1 is yes.

As for 2…

In the path syntax spaces and commas are optional. 16.908-0.762 is parsed one character at a time so the parser must know that when it gets to the – sign that 16.908 is a number but 16.908- is not and therefore the – sign must be the beginning of the next number which is -0.762

There are three pairs of numbers in the illustrator example. Adding optional spaces makes it clearer…

c -6.741,6.32 -7.083,16.908 -0.762,23.649

The grammar is here