SVG: simplify path to remove curves?

Question

I have a svg file which contains complex paths with bezier curves in it. I need to convert this path-data to use it for html map-area's, so I in fact I need just the coordinates (but for large curves, it would be very nice to have some coordinates 'between' the two end-points.

I tried Inkscape's simplify path function, but those paths still contain curves...

Is there any tool or formula to convert these curves into simple coordinates?

Maybe another Inkscape output-format that doesn't use curves in its coordinates?

If you just need the coordinates, can't you extract them out of the SVG file using a script? — Jeroen Baert, Jun 17 '11 at 14:16

score 24 · Accepted Answer · edited Oct 22 '20 at 06:01

In Inkscape:

Select the Edit Path By Nodes tool (F2)
Click on your path to select it
Ctrl + A to select all the nodes in that path
Click the Insert new nodes into selected segments. Repeat this to represent the shape of the curve/s in as much detail as you need.
Then click Make Selected Segments Lines

These options are on the toolbar at the top - the plus icon and the straight diagonal line between two square nodes.

score 9 · Answer 2 · answered Jan 26 '16 at 00:14

9

For automation, try the included Flatten Bezier extension in Inkscape. Description here.

answered Jan 26 '16 at 00:14

Jet Blue

5,109
7
36
48

1

This works so much better than "Make Selected Segments Lines", as it'll actually add nodes to approximate the curves. – Laurence Gonsalves Nov 20 '16 at 19:20
1

This is the correct solution. It addresses the `but for large curves, it would be very nice to have some coordinates 'between' the two end-points` part in the question. The extension is under `Extensions` > `Modify Path` > `Flatten Beziers...` in Inkscape 0.92. – Attila Tanyi May 22 '17 at 21:28
It is possible to use "Make Selected Segments Lines" to do this. However the accepted answer completely missed the critical step. I've edited it to add this step: use "Insert new nodes into selected segment" before "Make Selected Segments Lines" – Ash Oct 22 '20 at 06:04

score 1 · Answer 3 · answered Oct 26 '17 at 13:19

There is more technical way to simplify SVG path - https://github.com/mattdesl/simplify-path

var path = [ [250, 150], [250, 150], [25, 25], [24, 25], [10, 10] ]
var tolerance = 10
path = simplify(path, tolerance)
//result:
//[ [ 250, 150 ], [ 25, 25 ], [ 10, 10 ] ]

SVG: simplify path to remove curves?

3 Answers3

Linked