17

I am scouring the web for tools, programs, utilities, supporting libraries and code primitives that help optimize SVGs for simplicity, space and elegance recently, to link to from the Kilobyte SVG Challenge's tools section, but have yet to find good primitives focusing on how to reduce the number of coordinates of a path, without losing much – or ideally any – precision.

Take this marker-augmented version of the Coca Cola logo, for instance (~7kb, essentially all path data) – which very clearly shows lots of promise for reducing its number of bèziers, given some tooling to do the math to come up with a path using fewer nodes, while producing essentially the same curve.

For the much simpler problem of polygons and polylines (read "all-line paths"), you can use the Douglas–Peucker or Visvalingam’s algorithm (see Mike Bostock's excellent d3 implementation of the latter) to simply remove the coordinates least affecting the path's shape until you're happy with a size-to-precision fit suiting your needs.

I am looking for the equivalent that notices where larger curve (or even arc) segments could replace lots of these redundant mid-curve coordinate stops, without lots of manual tweaking. I think some vector graphics packages (Adobe Illustrator, maybe even Inkscape?) may offer features like these (tips on how to access them welcome!) - though I would love to find scriptable tools we can recommend and offer HOWTOs of how to use from the command line, or even web apps, that squeeze out excess path filler material for people.

For reference, the Kilobyte SVG Challenge is a for-fun SVG education and advocacy stunt I have set up, recently. All non-question-topic discussion about it are best held there, and/or on its github repository linked above. Stay awesome! :)

ecmanaut
  • 5,030
  • 2
  • 44
  • 66
  • In Inkscape, you have the menu item Path => Simplify. Maybe you can dig the code that is used for this feature. – Thomas W Nov 04 '13 at 15:08
  • Is it a real question, or a disguised advertising ? – GameAlchemist Dec 28 '13 at 17:34
  • @GameAlchemist I want better, more easy to find and use solutions to this complicated problem. Wikifying the question to remove context of where I want to publish strong answers might align it more with Stack guidelines, for all I know, but probably at the cost of having to put more effort into rejecting oversimplified answers like the special case Ramer–Douglas–Peucker algorithm for paths that just employ a bunch of linear-interpolated points. – ecmanaut Dec 28 '13 at 20:25

1 Answers1

4

You can use Ramer–Douglas–Peucker algorithm to simplify polylines or polygons path.

enter image description here

cuixiping
  • 24,167
  • 8
  • 82
  • 93
  • 3
    This much is stated in the question already, but thanks for the image example that succinctly demonstrates its workings. What complicates the problem is that SVG paths really are cubic splines at the primitive level rather than polylines/polygons, and that a succinct approximation of the result would need to recreate some cubic splines to get anywhere near the expressive terseness power they hold, albeit with different control points. – ecmanaut Dec 28 '13 at 20:23