Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG: simplify path to remove curves?

Tags:

path

svg

inkscape

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?

like image 668
Dylan Avatar asked Jun 17 '11 13:06

Dylan


3 Answers

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

like image 81
Peter Collingridge Avatar answered Oct 06 '22 03:10

Peter Collingridge


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

like image 26
Jet Blue Avatar answered Oct 06 '22 03:10

Jet Blue


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 ] ]
like image 35
mykola.rykov Avatar answered Oct 06 '22 04:10

mykola.rykov