How to reduce the number of points in bezier curve paths

Question

I have a large svg path which has quadratice bezier curves. The path data is used for drawing maps. How to reduce the number of points of the bezier curve without distorting the overall shape?

Answer 1

You don't say whether you want to do this offline (pre-prepared paths) or online (on the fly). If offline is fine, use a tool like Inkscape.

If you want to calculate the simplified curve yourself, then the typical algorithm used to do this is also the same one that has been used for drawing bezier curves. The algorithm is called "flattening".

Basically the idea is to convert the bezier curves to a series of straight line segments. Because you don't want the the flatness of the line segments to be visible, you have to take into account the scale of the drawing and how curvy the bezier is. If the bezier is very curvy you have to use more line segments than if it is fairly straight.

What you typically do is divide each bezier into two using De Casteljau's algorithm. Then look at each of the two half bezier curves. If a bezier is straight enough to meet a flatness limit you decide on, then stop dividing. Otherwise, divide in half and try again.

At the end of the process you should get a polyline that is indistinguishable from the bezier version. Or if you use a "flatness test" that is a bit courser than that, you will get a rougher approximation of the shape. In your case a map.

If you google bezier flattening you can find a number of papers on the technique. And a few pages which describe how to do it in a more friendly accessible way. For example this one, which is about generating offset curves, but starts out by describing how to flatten a curve:

https://seant23.wordpress.com/2010/11/12/offset-bezier-curves/