title: SVG Path optimization
body: <p>We have on our project a JSON file made by another team that helped to create dynamic SVG with binding. The problem with the JSON file is it contains duplicate and unoptimized paths.</p>
  
  <p>I've decided to make a NodeJS script that scan the paths contained into the file and that optimize it.</p>
  
  <p>A sample of an unoptimized path:</p>
  
  <pre><code>"paths": [ "M59245.1734326687,2320.0L59266.994415716,2320.0L59266.994415716,2320.0L59306.410931336,2320.0L59306.410931336,2320.0L59345.827446956,2320.0L59345.827446956,2320.0L59385.243962576,2320.0L59385.243962576,2320.0L59424.660478196,2320.0L59424.660478196,2320.0L59464.076993816,2320.0L59464.076993816,2320.0L59503.493509436,2320.0L59503.493509436,2320.0L59542.910025056,2320.0L59542.910025056,2320.0L59582.326540676,2320.0L59582.326540676,2320.0L59621.743056296,2320.0L59621.743056296,2320.0L59633.0477129758,2320.0L59633.0477129758,2320.0L59661.159571916,2320.0L59661.159571916,2320.0L59700.576087536,2320.0L59700.576087536,2320.0L59739.992603156,2320.0L59739.992603156,2320.0L59779.409118776,2320.0L59779.409118776,2320.0L59818.825634396,2320.0L59818.825634396,2320.0L59858.242150016,2320.0L59858.242150016,2320.0L59897.658665636,2320.0L59897.658665636,2320.0L59937.075181256,2320.0L59937.075181256,2320.0L59976.491696876,2320.0L59976.491696876,2320.0L60015.908212496,2320.0L60015.908212496,2320.0L60030.5396230941,2320.0L60030.5396230941,2320.0L60055.324728116,2320.0L60055.324728116,2320.0L60094.741243736,2320.0L60094.741243736,2320.0L60134.157759356,2320.0L60134.157759356,2320.0L60173.574274976,2320.0L60173.574274976,2320.0L60212.990790596,2320.0L60212.990790596,2320.0L60252.407306216,2320.0L60252.407306216,2320.0L60291.823821836,2320.0L60291.823821836,2320.0L60331.240337456,2320.0L60331.240337456,2320.0L60370.656853076,2320.0L60370.656853076,2320.0L60410.073368696,2320.0L60410.073368696,2320.0L60428.0157666062,2320.0M60428.0,2320.0L60428.0044472058,2319.99990189987L60428.0044472058,2319.99990189987" ]
  </code></pre>
  
  <p>Path without duplicates (half the length!):</p>
  
  <pre><code>"paths": [ "M59245.1734326687,2320L59266.994415716,2320,59306.410931336,2320,59345.827446956,2320,59385.243962576,2320,59424.660478196,2320,59464.076993816,2320,59503.493509436,2320,59542.910025056,2320,59582.326540676,2320,59621.743056296,2320,59633.0477129758,2320,59661.159571916,2320,59700.576087536,2320,59739.992603156,2320,59779.409118776,2320,59818.825634396,2320,59858.242150016,2320,59897.658665636,2320,59937.075181256,2320,59976.491696876,2320,60015.908212496,2320,60030.5396230941,2320,60055.324728116,2320,60094.741243736,2320,60134.157759356,2320,60173.574274976,2320,60212.990790596,2320,60252.407306216,2320,60291.823821836,2320,60331.240337456,2320,60370.656853076,2320,60410.073368696,2320,60428.0157666062,2320M60428,2320L60428.0044472058,2319.99990189987" ]
  </code></pre>
  
  <p>After analyzing results, I've come to a conclusion that I can do simplification of paths to reduce useles lines. So I've decided to do also a simplification of each paths using <code>npm</code> package <code>simplify-path</code>. It works fine:</p>
  
  <pre><code>Not simplified:
  [ [ [ 59245.1734326687, 2320 ] ], [ [ 59266.994415716, 2320 ], [ 59306.410931336, 2320 ], [ 59345.827446956, 2320 ], [ 59385.243962576, 2320 ], [ 59424.660478196, 2320 ], [ 59464.076993816, 2320 ], [ 59503.493509436, 2320 ], [ 59542.910025056, 2320 ], [ 59582.326540676, 2320 ], [ 59621.743056296, 2320 ], [ 59633.0477129758, 2320 ], [ 59661.159571916, 2320 ], [ 59700.576087536, 2320 ], [ 59739.992603156, 2320 ], [ 59779.409118776, 2320 ], [ 59818.825634396, 2320 ], [ 59858.242150016, 2320 ], [ 59897.658665636, 2320 ], [ 59937.075181256, 2320 ], [ 59976.491696876, 2320 ], [ 60015.908212496, 2320 ], [ 60030.5396230941, 2320 ], [ 60055.324728116, 2320 ], [ 60094.741243736, 2320 ], [ 60134.157759356, 2320 ], [ 60173.574274976, 2320 ], [ 60212.990790596, 2320 ], [ 60252.407306216, 2320 ], [ 60291.823821836, 2320 ], [ 60331.240337456, 2320 ], [ 60370.656853076, 2320 ], [ 60410.073368696, 2320 ], [ 60428.0157666062, 2320 ] ], [ [ 60428, 2320 ] ], [ [ 60428.0044472058, 2319.99990189987 ] ] ]
  
  Simplified: 
  [ 59245.1734326687, 2320, 60428.0044472058, 2319.99990189987 ]
  </code></pre>
  
  <p>How can I convert back to SVG Path the simplified array of points? Is there any API to this?</p>
  
  <p>I drop a part from the code where I simplify SVG Path (except for the RegEx, the code is not from me!):</p>
  
  <pre><code>// Parse SVG Path to array.
  var commands = pathArrays[i].paths[j].split(/(?=[LMC])/);
  
  // Split the Path array into a Points array.
  var pointArrays = commands.map(function(d){
      var pointsArray = d.slice(1, d.length).split(/[\s,-]+/);
  
      if (pointsArray[0] == '')
          pointsArray.shift();                
  
      var pairsArray = [];
      for(var i = 0; i &lt; pointsArray.length; i += 2){
          pairsArray.push([+pointsArray[i], +pointsArray[i+1]]);
      }
      return pairsArray;
  });
  
  // Call simplify method from npm package.
  var simplifyArray = simplify(pointArrays, 10);
  
  // ==&gt; I want to convert array of points to SVG Path &lt;==
  </code></pre>