title: Is there a way to reduce the number of coordinates in a complex enclosed SVG path?
body: <p>What I'd like to do is take an SVG shape drawn by an enclosed path (in this case, a region of a map) and reduce the number of points to create a simpler shape.</p>
  
  <p>I've tried implementing the Ramer-Douglas-Peucker algorithm to reduce the number of points. For example, here's a fiddle using the simplify.js library:</p>
  
  <p><a href="https://jsfiddle.net/0t3n8762/" rel="nofollow noreferrer">https://jsfiddle.net/0t3n8762/</a></p>
  
  <p>After reading about the issue, if I understood it correctly, it seems the algorithm isn't really designed to work on enclosed shapes but open ended paths. I tried splitting each path into two (so there are two lines that together make the entire shape) and running the algorithm on each before recombining them, though the results seem essentially identical:</p>
  
  <p><a href="https://jsfiddle.net/caqwL3t7/" rel="nofollow noreferrer">https://jsfiddle.net/caqwL3t7/</a></p>
  
  <p>It may be (and indeed is quite likely) that I'm just not grasping how the algorithm is supposed to work and am implementing it incorrectly. Or perhaps that I should be trying a completely different method altogether.</p>
  
  <pre><code>coords = pathToCoords($("#JP-01").attr("d"));
  
  for (var i = 0; i &lt; coords.length; i++) {
   newCoords[i] = simplify(coords[i], 2);
  }
  
  newPath = coordsToPath(newCoords);
  
  $("#JP-01").attr("d", newPath);
  </code></pre>
  
  <p>What I would want to produce is a simpler path that still retains the overall shape of the original, drawn with fewer points. The actual result is a distorted shape that shares little in common with the original.</p>