Difference between "S" and "s" , "C" and "c", "Q" and "q" in svg?

Question

Can someone explain the difference between "S" and "s", "C" and "c", "Q" and "q" command in svg d property, please help, and it would be sooo good if you could give a visual example.

Answer 1

Lowercase path command letters are relative, meaning the values are relative to the previously defined coordinates.

Uppercase values are absolute, relative to the upper left hand corner of the svg coordinate system.

Personally, while relative positioning can be useful, I favor absolute because I find it easier to reason about.

Here is an example where the numeric values are the same, but the behavior is different as a result of absolute and relative positioning:

 svg { overflow: visible } path { stroke: black; fill: none; } div { width: 150px; float: left; }

 <div> <p>relative</p> <svg> <path d="m 0 0 l 90 30 10 10 0 40" /> </svg> </div> <div> <p>absolute</p> <svg> <path d="M 0 0 L 90 30 10 10 0 40" /> </svg> </div>