Implement path stringify (#1387)

Ref https://github.com/svg/svgo/issues/32

Added `stringifyPathData` utility to produce small as possible path by
- matching leading moveto and line to commands (m -> l, M -> L)
- combining moveto and lineto commands
- avoiding space before decimal numbers if possible

lib/path.js

@@ -208,3 +208,81 @@ const parsePathData = (string) => {
   return pathData;
 };
 exports.parsePathData = parsePathData;
+
+const stringifyNumber = ({ number, precision }) => {
+  let result;
+  if (precision == null) {
+    result = number.toString();
+  } else {
+    result = number.toFixed(precision);
+    if (result.includes('.')) {
+      result = result.replace(/\.?0+$/, '')
+    }
+  }
+  // remove zero whole from decimal number
+  if (result !== '0') {
+    result = result.replace(/^0/, '').replace(/^-0/, '-');
+  }
+  return result;
+};
+
+// elliptical arc large-arc and sweep flags are rendered with spaces
+// because many non-browser environments are not able to parse such paths
+const stringifyArgs = ({ args, precision }) => {
+  let result = '';
+  let prev;
+  for (let i = 0; i < args.length; i += 1) {
+    const number = args[i];
+    const numberString = stringifyNumber({ number, precision });
+    // avoid space before first and negative numbers
+    if (i === 0 || numberString.startsWith('-')) {
+      result += numberString;
+    } else if (prev.includes('.') && numberString.startsWith('.')) {
+      result += numberString;
+    } else {
+      result += ` ${numberString}`;
+    }
+    prev = numberString;
+  }
+  return result;
+};
+
+const stringifyPathData = ({ pathData, precision }) => {
+  // combine sequence of the same commands
+  let combined = [];
+  for (let i = 0; i < pathData.length; i += 1) {
+    const { command, args } = pathData[i];
+    if (i === 0) {
+      combined.push({ command, args });
+    } else {
+      const last = combined[combined.length - 1];
+      // match leading moveto with following lineto
+      if (i === 1) {
+        if (command === 'L') {
+          last.command = 'M';
+        }
+        if (command === 'l') {
+          last.command = 'm';
+        }
+      }
+      if (
+        (last.command === command &&
+          last.command !== 'M' &&
+          last.command !== 'm') ||
+        // combine matching moveto and lineto sequences
+        (last.command === 'M' && command === 'L') ||
+        (last.command === 'm' && command === 'l')
+      ) {
+        last.args = [...last.args, ...args];
+      } else {
+        combined.push({ command, args });
+      }
+    }
+  }
+  let result = '';
+  for (const { command, args } of combined) {
+    result += command + stringifyArgs({ args, precision });
+  }
+  return result;
+};
+exports.stringifyPathData = stringifyPathData;

lib/path.test.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const { expect } = require('chai');
-const { parsePathData } = require('./path.js');
+const { parsePathData, stringifyPathData } = require('./path.js');
 
 describe('parse path data', () => {
   it('should allow spaces between commands', () => {
@@ -74,3 +74,88 @@ describe('parse path data', () => {
     ]);
   });
 });
+
+describe('stringify path data', () => {
+  it('should combine sequence of the same commands', () => {
+    expect(
+      stringifyPathData({
+        pathData: [
+          { command: 'M', args: [0, 0] },
+          { command: 'h', args: [10] },
+          { command: 'h', args: [20] },
+          { command: 'h', args: [30] },
+          { command: 'H', args: [40] },
+          { command: 'H', args: [50] },
+        ],
+      })
+    ).to.equal('M0 0h10 20 30H40 50');
+  });
+  it('should not combine sequence of moveto', () => {
+    expect(
+      stringifyPathData({
+        pathData: [
+          { command: 'M', args: [0, 0] },
+          { command: 'M', args: [10, 10] },
+          { command: 'm', args: [20, 30] },
+          { command: 'm', args: [40, 50] },
+        ],
+      })
+    ).to.equal('M0 0M10 10m20 30m40 50');
+  });
+  it('should combine moveto and sequence of lineto', () => {
+    expect(
+      stringifyPathData({
+        pathData: [
+          { command: 'M', args: [0, 0] },
+          { command: 'l', args: [10, 10] },
+          { command: 'M', args: [0, 0] },
+          { command: 'l', args: [10, 10] },
+          { command: 'M', args: [0, 0] },
+          { command: 'L', args: [10, 10] },
+        ],
+      })
+    ).to.equal('m0 0 10 10M0 0l10 10M0 0 10 10');
+    expect(
+      stringifyPathData({
+        pathData: [
+          { command: 'm', args: [0, 0] },
+          { command: 'L', args: [10, 10] },
+        ],
+      })
+    ).to.equal('M0 0 10 10');
+  });
+  it('should avoid space before first, negative and decimals', () => {
+    expect(
+      stringifyPathData({
+        pathData: [
+          { command: 'M', args: [0, -1.2] },
+          { command: 'L', args: [0.3, 4] },
+          { command: 'L', args: [5, -0.6] },
+          { command: 'L', args: [7, 0.8] },
+        ],
+      })
+    ).to.equal('M0-1.2.3 4 5-.6 7 .8');
+  });
+  it('should configure precision', () => {
+    expect(
+      stringifyPathData({
+        pathData: [
+          { command: 'M', args: [0, -1.9876] },
+          { command: 'L', args: [0.3, 3.14159265] },
+          { command: 'L', args: [100, 200] },
+        ],
+        precision: 3,
+      })
+    ).to.equal('M0-1.988.3 3.142 100 200');
+    expect(
+      stringifyPathData({
+        pathData: [
+          { command: 'M', args: [0, -1.9876] },
+          { command: 'L', args: [0.3, 3.14159265] },
+          { command: 'L', args: [100, 200] },
+        ],
+        precision: 0,
+      })
+    ).to.equal('M0-2 0 3 100 200');
+  });
+});

plugins/_path.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { parsePathData } = require('../lib/path.js');
+const { parsePathData, stringifyPathData } = require('../lib/path.js');
 
 var regNumericValues = /[-+]?(\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g,
     transform2js = require('./_transforms').transform2js,
@@ -9,7 +9,6 @@ var regNumericValues = /[-+]?(\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g,
     collections = require('./_collections.js'),
     referencesProps = collections.referencesProps,
     defaultStrokeWidth = collections.attrsGroupsDefaults.presentation['stroke-width'],
-    cleanupOutData = require('../lib/svgo/tools').cleanupOutData,
     removeLeadingZero = require('../lib/svgo/tools').removeLeadingZero,
     prevCtrlPoint;
 
@@ -500,64 +499,32 @@ function computeQuadraticFirstDerivativeRoot(a, b, c) {
  */
 exports.js2path = function(path, data, params) {
 
-    path.pathJS = data;
+  path.pathJS = data;
 
-    if (params.collapseRepeated) {
+  const pathData = [];
-        data = collapseRepeated(data);
+  for (const item of data) {
+    // remove moveto commands which are followed by moveto commands
+    if (
+      pathData.length !== 0 &&
+      (item.instruction === 'M' || item.instruction === 'm')
+    ) {
+      const last = pathData[pathData.length - 1];
+      if (last.command === 'M' || last.command === 'm') {
+        pathData.pop();
+      }
     }
+    pathData.push({
+      command: item.instruction,
+      args: item.data || [],
+    });
+  }
 
-    path.attr('d').value = data.reduce(function(pathString, item) {
+  path.attr('d').value = stringifyPathData({
-        var strData = '';
+    pathData,
-        if (item.data) {
+    precision: params.floatPrecision,
-            strData = cleanupOutData(item.data, params, item.instruction);
+  });
-        }
-        return pathString += item.instruction + strData;
-    }, '');
-
 };
 
-/**
- * Collapse repeated instructions data
- *
- * @param {Array} path input path data
- * @return {Array} output path data
- */
-function collapseRepeated(data) {
-
-    var prev,
-        prevIndex;
-
-    // copy an array and modifieds item to keep original data untouched
-    data = data.reduce(function(newPath, item) {
-        if (
-            prev && item.data &&
-            item.instruction == prev.instruction
-        ) {
-            // concat previous data with current
-            if (item.instruction != 'M') {
-                prev = newPath[prevIndex] = {
-                    instruction: prev.instruction,
-                    data: prev.data.concat(item.data),
-                    coords: item.coords,
-                    base: prev.base
-                };
-            } else {
-                prev.data = item.data;
-                prev.coords = item.coords;
-            }
-        } else {
-            newPath.push(item);
-            prev = item;
-            prevIndex = newPath.length - 1;
-        }
-
-        return newPath;
-    }, []);
-
-    return data;
-
-}
-
 function set(dest, source) {
     dest[0] = source[source.length - 2];
     dest[1] = source[source.length - 1];

test/plugins/convertPathData.01.svg

@@ -24,8 +24,8 @@
     <path d="M10 50"/>
     <path d="M10 50"/>
     <path d="M10 0"/>
-    <path d="M10-50.2L.3-2"/>
+    <path d="M10-50.2.3-2"/>
-    <path d="M10-50l.2.3"/>
+    <path d="m10-50 .2.3"/>
     <path d="M10 50"/>
     <path d="M-10-50"/>
     <path d="M-10-50"/>

test/plugins/convertPathData.02.svg

@@ -10,7 +10,7 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <path d="M10 50l10-20"/>
+    <path d="m10 50 10-20"/>
     <path d="M10 50c10-20 30 0 50 20"/>
     <path d="M10 50c10-20 30 0 50 20S20 30 30 60"/>
     <path d="M10 50q20 10 20 20"/>

test/plugins/convertPathData.03.svg

@@ -23,9 +23,9 @@
 
 <svg xmlns="http://www.w3.org/2000/svg">
     <path d="M20 60"/>
-    <path d="M10 50l10 10"/>
+    <path d="m10 50 10 10"/>
-    <path d="M10 50l10-20 20 30"/>
+    <path d="m10 50 10-20 20 30"/>
-    <path d="M10 50l10-20 20 30"/>
+    <path d="m10 50 10-20 20 30"/>
     <path d="M10 50c10-20 30 0 50 20-20-30-10-10 10 10"/>
     <path d="M10 50c10-20 30 0 50 20-20-30-10-10 10 10"/>
     <path d="M10 50c10-20 30 0 50 20S30 30 40 50s20 20 40 50"/>

test/plugins/convertPathData.04.svg

@@ -11,7 +11,7 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <path d="M10 50l20 30-10-50"/>
+    <path d="m10 50 20 30-10-50"/>
     <path d="M10 50c20 30 40 50 60 70-50-90-30-70-10-50"/>
     <path d="M10 50c20 30 40 50 60 70s20 40 40 50L10 20"/>
     <path d="M10 50q20 60 30 70-20-60-10-50"/>

test/plugins/convertPathData.05.svg

@@ -8,8 +8,8 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.347 50.09L10 50.2"/>
+    <path d="M10.347 50.09 10 50.2"/>
-    <path d="M10 10l1 1m9 9"/>
+    <path d="m10 10 1 1m9 9"/>
-    <path d="M0 0l.113 1 .114 2L.34 6"/>
+    <path d="m0 0 .113 1 .114 2L.34 6"/>
-    <path d="M0 0l.003 3 .002 2 .003 3 .002 2"/>
+    <path d="m0 0 .003 3 .002 2 .003 3 .002 2"/>
 </svg>

test/plugins/convertPathData.06.svg

@@ -19,10 +19,10 @@
     <path d="M10 50"/>
     <path d="M10 50h10"/>
     <path d="M10 50v10"/>
-    <path d="M10 50l10-20H10"/>
+    <path d="m10 50 10-20H10"/>
-    <path d="M10 50l10-20V20"/>
+    <path d="m10 50 10-20V20"/>
-    <path d="M10 50l10-20H10l30 20"/>
+    <path d="m10 50 10-20H10l30 20"/>
-    <path d="M10 50l10-20V20l20 30"/>
+    <path d="m10 50 10-20V20l20 30"/>
     <path d="M10 50h20"/>
     <path d="M10 50h20"/>
     <path d="M10 50h30"/>

test/plugins/convertPathData.08.svg

@@ -20,14 +20,14 @@
     <path d="M100 200h300"/>
     <path d="M100 200h300"/>
     <path d="M100 200h150s50 100 150 10"/>
-    <path d="M100 200l150 50h250"/>
+    <path d="m100 200 150 50h250"/>
     <path d="M100 200h200"/>
     <path d="M100 200h700"/>
     <path d="M100 200h500q200 0 200 100"/>
     <path d="M100 200q100 0 100 100t0 200 100 0"/>
     <path d="M100 200h700l100 100"/>
-    <path d="M100 200l700 100"/>
+    <path d="m100 200 700 100"/>
-    <path d="M100 200l50-50"/>
+    <path d="m100 200 50-50"/>
-    <path d="M100 200l50-50"/>
+    <path d="m100 200 50-50"/>
     <path d="M100 200c-2.5 10.5-4 21-4 32 0 64 63.5 128 127.5 128H320c64 0 128-64 128-128s-64-128-128-128"/>
 </svg>

test/plugins/convertPathData.10.svg

@@ -5,5 +5,5 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <path d="M100 200l300 400zm100 200h100"/>
+    <path d="m100 200 300 400zm100 200h100"/>
 </svg>

test/plugins/convertPathData.11.svg

@@ -36,36 +36,36 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <path d="M100 0v100l70-50zm70 50l70-50v100z"/>
+    <path d="M100 0v100l70-50zm70 50 70-50v100z"/>
-    <path transform="" d="M0 0v100l70-50zm70 50l70-50v100z"/>
+    <path transform="" d="M0 0v100l70-50zm70 50 70-50v100z"/>
-    <path fill="red" d="M118.742 187.108l79.162 124.74-96.593-25.883 8.716-49.428c17.43-98.857 89.875-79.446 81.16-30.017s63.728 68.84 72.444 19.411q13.073-74.143 87.877 75.31t193.185 51.764z"/>
+    <path fill="red" d="m118.742 187.108 79.162 124.74-96.593-25.883 8.716-49.428c17.43-98.857 89.875-79.446 81.16-30.017s63.728 68.84 72.444 19.411q13.073-74.143 87.877 75.31t193.185 51.764z"/>
-    <path fill="red" stroke="red" transform="rotate(15) scale(.5) skewX(5) translate(200,100)" d="M100 200l200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0z"/>
+    <path fill="red" stroke="red" transform="rotate(15) scale(.5) skewX(5) translate(200,100)" d="m100 200 200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0z"/>
-    <path fill="red" stroke="red" transform="rotate(15) scale(.5) skewX(5) translate(200,100)" d="M100 200l200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0a150 150 0 1 0 150-150z"/>
+    <path fill="red" stroke="red" transform="rotate(15) scale(.5) skewX(5) translate(200,100)" d="m100 200 200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0a150 150 0 1 0 150-150z"/>
-    <path fill="red" stroke="red" d="M106.066 183.712l70.71 122.474-96.592-25.882 12.941-48.296c25.882-96.593 98.326-77.181 85.385-28.885s59.504 67.708 72.445 19.412q19.411-72.445 83.652 74.178t193.185 51.764z" stroke-width=".5"/>
+    <path fill="red" stroke="red" d="m106.066 183.712 70.71 122.474-96.592-25.882 12.941-48.296c25.882-96.593 98.326-77.181 85.385-28.885s59.504 67.708 72.445 19.412q19.411-72.445 83.652 74.178t193.185 51.764z" stroke-width=".5"/>
-    <path fill="red" stroke="red" d="M318.198 551.135L530.33 918.56l-289.778-77.646 38.823-144.889c77.646-289.778 294.98-231.543 256.156-86.655s178.51 203.124 217.334 58.235q58.234-217.334 250.955 222.534t579.555 155.292z" stroke-width="1.5"/>
+    <path fill="red" stroke="red" d="M318.198 551.135 530.33 918.56l-289.778-77.646 38.823-144.889c77.646-289.778 294.98-231.543 256.156-86.655s178.51 203.124 217.334 58.235q58.234-217.334 250.955 222.534t579.555 155.292z" stroke-width="1.5"/>
-    <path fill="red" stroke="red" d="M70.004 121.25l46.669 80.833L52.922 185l8.54-31.876c17.083-63.75 64.896-50.94 56.355-19.064s39.272 44.687 47.813 12.812q12.812-47.814 55.21 48.957t127.503 34.165z" stroke-width=".33"/>
+    <path fill="red" stroke="red" d="m70.004 121.25 46.669 80.833L52.922 185l8.54-31.876c17.083-63.75 64.896-50.94 56.355-19.064s39.272 44.687 47.813 12.812q12.812-47.814 55.21 48.957t127.503 34.165z" stroke-width=".33"/>
     <g stroke="red">
-        <path fill="red" d="M106.066 183.712l70.71 122.474-96.592-25.882 12.941-48.296c25.882-96.593 98.326-77.181 85.385-28.885s59.504 67.708 72.445 19.412q19.411-72.445 83.652 74.178t193.185 51.764z" stroke-width=".5"/>
+        <path fill="red" d="m106.066 183.712 70.71 122.474-96.592-25.882 12.941-48.296c25.882-96.593 98.326-77.181 85.385-28.885s59.504 67.708 72.445 19.412q19.411-72.445 83.652 74.178t193.185 51.764z" stroke-width=".5"/>
     </g>
     <g stroke="red" stroke-width="2">
-        <path fill="red" d="M106.066 183.712l70.71 122.474-96.592-25.882 12.941-48.296c25.882-96.593 98.326-77.181 85.385-28.885s59.504 67.708 72.445 19.412q19.411-72.445 83.652 74.178t193.185 51.764z" stroke-width="1"/>
+        <path fill="red" d="m106.066 183.712 70.71 122.474-96.592-25.882 12.941-48.296c25.882-96.593 98.326-77.181 85.385-28.885s59.504 67.708 72.445 19.412q19.411-72.445 83.652 74.178t193.185 51.764z" stroke-width="1"/>
     </g>
-    <path transform="scale(10)" id="a" d="M0 0v100l70-50zm70 50l70-50v100z"/>
+    <path transform="scale(10)" id="a" d="M0 0v100l70-50zm70 50 70-50v100z"/>
-    <path transform="scale(10)" id="a" d="M0 0v100l70-50zm70 50l70-50v100z" stroke="#000"/>
+    <path transform="scale(10)" id="a" d="M0 0v100l70-50zm70 50 70-50v100z" stroke="#000"/>
     <path id="a" d="M0 0v1000l700-500zm700 500L1400 0v1000z" stroke="#000" stroke-width="5"/>
     <g stroke="#000" stroke-width="5">
-        <path transform="scale(10)" id="a" d="M0 0v100l70-50zm70 50l70-50v100z"/>
+        <path transform="scale(10)" id="a" d="M0 0v100l70-50zm70 50 70-50v100z"/>
     </g>
-    <path fill="url(#gradient)" transform="rotate(15) scale(0.33) translate(200,100)" d="M100 200l200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0z"/>
+    <path fill="url(#gradient)" transform="rotate(15) scale(0.33) translate(200,100)" d="m100 200 200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0z"/>
-    <path clip-path="url(#a)" transform="rotate(15) scale(0.33) translate(200,100)" d="M100 200l200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0z"/>
+    <path clip-path="url(#a)" transform="rotate(15) scale(0.33) translate(200,100)" d="m100 200 200 200H100V300c0-200 150-200 150-100s150 100 150 0q0-150 200 100t400 0z"/>
     <path d="M10 0a10 10 0 1 0 20 0"/>
     <path d="M3.864 1.035a8 12 15 1 0 15.455 4.141"/>
     <path d="M3.536 3.536a10 10 0 1 0 14.142 14.142"/>
     <path d="M5 0a16.18 6.18 31.717 1 0 20 0"/>
     <path d="M-12.122 332.074a80 240 15 1 0 154.548 41.41 80 240 15 1 0-154.548-41.41"/>
     <path d="M721.72 450.759a240 80 15 1 0 41.412-154.548 240 80 15 1 0-41.411 154.548"/>
-    <path d="M8.6 6.4L5.4 9.5l3.2 3.1-.7.8L4 9.5l3.9-3.9zM5 10V9h10v1z"/>
+    <path d="M8.6 6.4 5.4 9.5l3.2 3.1-.7.8L4 9.5l3.9-3.9zM5 10V9h10v1z"/>
     <path d="M561.214 392.766a48.107 95.08 10.132 1 1-94.083-20.365 48.107 95.079 10.132 1 1 94.082 20.365z"/>
     <path d="M-1.26-1.4a6.53 1.8-15.2 1 1 12.55-3.44"/>
-    <path d="M0 0l.21 3.99.21 3.99"/>
+    <path d="m0 0 .21 3.99.21 3.99"/>
 </svg>

test/plugins/convertPathData.12.svg

@@ -28,7 +28,7 @@
     <path d="M10 50v80"/>
     <path d="M10 50v30V0"/>
     <path d="M10 50V10v70"/>
-    <path d="M10 50l10 10 20 20 10 10"/>
+    <path d="m10 50 10 10 20 20 10 10"/>
     <path d="M10 50h70H0"/>
     <path d="M10 50H0h80"/>
     <path d="M10 50H0m30-40L10 80"/>

test/plugins/convertPathData.17.svg

@@ -5,7 +5,7 @@
 @@@
 
 <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path d="M33.027833 1.96545901l5.0135294 5.01352941c1e-7-8e-8-.0319306-2.94431722-.0319306-2.94431722L34 .02523956V0H13v2h20.062374z"/>
+    <path d="m33.027833 1.96545901 5.0135294 5.01352941c.0000001-.00000008-.0319306-2.94431722-.0319306-2.94431722L34 .02523956V0H13v2h20.062374z"/>
 </svg>
 
 @@@

test/plugins/mergePaths.03.svg

@@ -27,7 +27,7 @@
 <svg xmlns="http://www.w3.org/2000/svg">
     <path d="M30 0L0 40H60z"/>
     <path d="M0 10H60L30 50z"/>
-    <path d="M0 0V50L50 0M0 60L50 10V60"/>
+    <path d="M0 0V50L50 0M0 60 50 10V60"/>
     <g>
         <path d="M100 0a50 50 0 0 1 0 100M25 25H75V75H25z"/>
         <path d="M135 85H185V135H135z"/>
@@ -39,6 +39,6 @@
         <path d="M30 32.705V40h10.42L30 32.705zM46.25 34.928V30h-7.04l7.04 4.928z"/>
     </g>
     <g>
-        <path d="M20 20H60L100 30M20 20L50 30H100"/>
+        <path d="M20 20H60L100 30M20 20 50 30H100"/>
     </g>
 </svg>