How to convert SVG 'c' curve to a list of cubic bezier curve?

4
votes

I have a path as follow:

d="m 0,0 38.913,455.481 c 7.122,83.37 6.816,164.779 13.005,236.077 18.924,218.078 232.099,308.663 268.399,493.918 16.874,86.119 -37.253,229.874 -42.144,323.022 -7.527,143.381 69.579,142.669 104.526,244.648"

I don't quite understand how it is represented.

I guess it is converted as a list of multiple simple cubic bezier curves, but how? What should i take as control points, start point, end point each time?

And what coordinates here exactly are relatives? And relative to what?

I am totally new to SVG graphics and (it seems to me that) w3 references doesn't give enough details on those points.

If it can help my goal here, is to represent this curve with javascript in a canvas point by point.

1
javascriptsvgbezier
what is so difficult about reading the spec - it's pretty darn clear: w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands – Michael Mullany
well, not really. At the beginning I thought that mean that it was a Bezier curve with 12 points (12th degree) which I implemented before I realized i should divide it in multiple cubic curves. So my point is, as mentioned in my comment, that this chapter is poorly written and lacks of crucial details. – Sami
I agree, the spec is not clear regarding what it means when you follow C or c with more than three points. – I. J. Kennedy

1 Answers

3
votes

You seem to have cubic bezier curves, not quadratic ones. The specification text explains what the control points are and what they are relative to (the end point of the previous move/line/curve generally)