15

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?

1
  • If you just need the coordinates, can't you extract them out of the SVG file using a script? Jun 17, 2011 at 14:16

3 Answers 3

24

In Inkscape:

  1. Select the Edit Path By Nodes tool (F2)
  2. Click on your path to select it
  3. Ctrl + A to select all the nodes in that path
  4. 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.
  5. 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.

screenshot of make selected segments lines

9

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

3
  • 1
    This works so much better than "Make Selected Segments Lines", as it'll actually add nodes to approximate the curves. Nov 20, 2016 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. May 22, 2017 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, 2020 at 6:04
1

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 ] ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.