CODEWITHSUNDEEP
pathsvginkscape
Dylan
Dylan

Reputation: 9383

SVG: simplify path to remove curves?

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?

Upvotes: 15

Views: 13641

Answers (3)

Peter Collingridge
Peter Collingridge

Reputation: 10979

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

Upvotes: 24

mykola.rykov
mykola.rykov

Reputation: 572

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

Upvotes: 1

Jet Blue
Jet Blue

Reputation: 5281

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

Upvotes: 9

Related Questions