feat(convertPathData): replace with z and remove z when optimal (#1822)

docs/03-plugins/convert-path-data.mdx

@@ -18,6 +18,9 @@ svgo:
     lineShorthands:
       description: If to convert regular lines to an explicit horizontal or vertical line where possible.
       default: true
+    convertToZ:
+      description: If to convert lines that go to the start to a <code>z</code> command.
+      default: true
     curveSmoothShorthands:
       description: If to convert curves to smooth curves where possible.
       default: true
@@ -55,6 +58,7 @@ This plugin uses multiple techniques to either reduce the number of instructions
 
 * Convert between relative or absolute coordinates, whichever is shortest.
 * Convert between commands. For example, a bézier curve that behaves like a straight line might as well use a line instruction.
+* Remove redundant commands. For example, a command that moves to the current position can be removed.
 * Trim redundant delimiters and leading zeros.
 * Round numeric values using conventional rounding rules.
 

plugins/convertPathData.js

@@ -46,6 +46,7 @@ let arcTolerance;
  *   },
  *   straightCurves: boolean,
  *   lineShorthands: boolean,
+ *   convertToZ: boolean,
  *   curveSmoothShorthands: boolean,
  *   floatPrecision: number | false,
  *   transformPrecision: number,
@@ -95,6 +96,7 @@ exports.fn = (root, params) => {
     },
     straightCurves = true,
     lineShorthands = true,
+    convertToZ = true,
     curveSmoothShorthands = true,
     floatPrecision = 3,
     transformPrecision = 5,
@@ -116,6 +118,7 @@ exports.fn = (root, params) => {
     makeArcs,
     straightCurves,
     lineShorthands,
+    convertToZ,
     curveSmoothShorthands,
     floatPrecision,
     transformPrecision,
@@ -167,6 +170,12 @@ exports.fn = (root, params) => {
             (computedStyle['stroke-linecap'].type === 'dynamic' ||
               computedStyle['stroke-linecap'].value !== 'butt');
           const maybeHasStrokeAndLinecap = maybeHasStroke && maybeHasLinecap;
+          const isSafeToUseZ = maybeHasStroke
+            ? computedStyle['stroke-linecap']?.type === 'static' &&
+              computedStyle['stroke-linecap'].value === 'round' &&
+              computedStyle['stroke-linejoin']?.type === 'static' &&
+              computedStyle['stroke-linejoin'].value === 'round'
+            : true;
 
           var data = path2js(node);
 
@@ -175,6 +184,7 @@ exports.fn = (root, params) => {
             convertToRelative(data);
 
             data = filters(data, newParams, {
+              isSafeToUseZ,
               maybeHasStrokeAndLinecap,
               hasMarkerMid,
             });
@@ -371,10 +381,14 @@ const convertToRelative = (pathData) => {
  * @type {(
  *   path: PathDataItem[],
  *   params: InternalParams,
- *   aux: { maybeHasStrokeAndLinecap: boolean, hasMarkerMid: boolean }
+ *   aux: { isSafeToUseZ: boolean, maybeHasStrokeAndLinecap: boolean, hasMarkerMid: boolean }
  * ) => PathDataItem[]}
  */
-function filters(path, params, { maybeHasStrokeAndLinecap, hasMarkerMid }) {
+function filters(
+  path,
+  params,
+  { isSafeToUseZ, maybeHasStrokeAndLinecap, hasMarkerMid }
+) {
   var stringify = data2Path.bind(null, params),
     relSubpoint = [0, 0],
     pathBase = [0, 0],
@@ -664,6 +678,20 @@ function filters(path, params, { maybeHasStrokeAndLinecap, hasMarkerMid }) {
         }
       }
 
+      // convert going home to z
+      // m 0 0 h 5 v 5 l -5 -5 -> m 0 0 h 5 v 5 z
+      if (
+        params.convertToZ &&
+        (isSafeToUseZ || next?.command === 'Z' || next?.command === 'z') &&
+        (command === 'l' || command === 'h' || command === 'v')
+      ) {
+        // @ts-ignore
+        if (pathBase[0] === item.coords[0] && pathBase[1] === item.coords[1]) {
+          command = 'z';
+          data = [];
+        }
+      }
+
       // collapse repeated commands
       // h 20 h 30 -> h 50
       if (
@@ -806,6 +834,16 @@ function filters(path, params, { maybeHasStrokeAndLinecap, hasMarkerMid }) {
       if (prev.command === 'Z' || prev.command === 'z') return false;
       prev = item;
     }
+    if (
+      (command === 'Z' || command === 'z') &&
+      params.removeUseless &&
+      isSafeToUseZ &&
+      // @ts-ignore
+      item.base[0] === item.coords[0] &&
+      // @ts-ignore
+      item.base[1] === item.coords[1]
+    )
+      return false;
 
     return true;
   });

plugins/plugins-types.ts

@@ -42,6 +42,7 @@ type DefaultPlugins = {
     };
     straightCurves?: boolean;
     lineShorthands?: boolean;
+    convertToZ?: boolean;
     curveSmoothShorthands?: boolean;
     floatPrecision?: number | false;
     transformPrecision?: number;
@@ -138,7 +139,7 @@ type DefaultPlugins = {
   moveElemsAttrsToGroup: void;
   moveGroupAttrsToElems: void;
   removeComments: {
-    preservePatterns: Array<RegExp|string> | false
+    preservePatterns: Array<RegExp | string> | false;
   };
   removeDesc: {
     removeAny?: boolean;

test/plugins/convertPathData.12.svg

@@ -18,12 +18,12 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <path d="M10 50h30-30"/>
-    <path d="M10 50h-30 30"/>
+    <path d="M10 50h30z"/>
+    <path d="M10 50h-30z"/>
     <path d="M10 50h-80"/>
     <path d="M10 50h80"/>
-    <path d="M10 50v30-30"/>
-    <path d="M10 50V20v30"/>
+    <path d="M10 50v30z"/>
+    <path d="M10 50V20z"/>
     <path d="M10 50v-80"/>
     <path d="M10 50v80"/>
     <path d="M10 50v30V0"/>

test/plugins/convertPathData.13.svg

@@ -5,5 +5,5 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <path d="M213 543q0-41 20-66.5t50-45.5l49 228q-54-4-86.5-34T213 543zM371 48z"/>
+    <path d="M213 543q0-41 20-66.5t50-45.5l49 228q-54-4-86.5-34T213 543M371 48"/>
 </svg>

test/plugins/convertPathData.14.svg

@@ -15,11 +15,11 @@
 <svg xmlns="http://www.w3.org/2000/svg">
     <path d="M0 0a5 5 0 0 1 5 5"/>
     <path d="M0 0a5 5 0 0 1 5 5l5-5"/>
-    <path d="M15 10a5 5 0 1 1 5-5l-5 5"/>
+    <path d="M15 10a5 5 0 1 1 5-5z"/>
     <path d="M41.008.102a5.006 5.006 0 0 1 3.849 3.705"/>
     <path d="M7.234 19.474a5 5 0 0 1-4.933-8.683"/>
-    <path d="M60 0a5 5 0 1 0 .001 10.001A5 5 0 0 0 60 0z"/>
+    <path d="M60 0a5 5 0 1 0 .001 10.001A5 5 0 0 0 60 0"/>
     <path d="M15 23.54a8.493 8.493 0 0 1-5.25-1.807"/>
-    <path d="M-9.5 82.311a4.81 4.81 0 1 1 .002-9.622A4.81 4.81 0 0 1-9.5 82.31z"/>
+    <path d="M-9.5 82.311a4.81 4.81 0 1 1 .002-9.622A4.81 4.81 0 0 1-9.5 82.31"/>
     <path d="M1.5 13.456a3.418 3.418 0 0 0 6.729.854Z"/>
 </svg>

test/plugins/convertPathData.18.svg

@@ -5,5 +5,5 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
-    <path d="M32 32a4 4 0 0 1-4 4H8a4 4 0 0 0-4-4V4a4 4 0 0 0 4-4h20a4 4 0 0 1 4 4v28z" fill="#888"/>
+    <path d="M32 32a4 4 0 0 1-4 4H8a4 4 0 0 0-4-4V4a4 4 0 0 0 4-4h20a4 4 0 0 1 4 4z" fill="#888"/>
 </svg>

test/plugins/convertPathData.19.svg

@@ -5,5 +5,5 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <path fill="#7ED321" stroke="#000" stroke-width="15" vector-effect="non-scaling-stroke" d="M62.5 62.5h375v375h-375v-375z"/>
+    <path fill="#7ED321" stroke="#000" stroke-width="15" vector-effect="non-scaling-stroke" d="M62.5 62.5h375v375h-375z"/>
 </svg>

test/plugins/convertPathData.20.svg

@@ -5,5 +5,5 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
-    <path d="M32 4a4 4 0 0 0-4-4H8a4 4 0 0 1-4 4v28a4 4 0 0 1 4 4h20a4 4 0 0 0 4-4V4z"/>
+    <path d="M32 4a4 4 0 0 0-4-4H8a4 4 0 0 1-4 4v28a4 4 0 0 1 4 4h20a4 4 0 0 0 4-4z"/>
 </svg>

test/plugins/convertPathData.27.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32">
+  <path d="M 6 12 v -6 h 6 a 3 3 0 0 1 -6 6 z" />
+  <path d="M 18 12 v -6 h 6 a 3 3 0 0 1 -6 6 z" stroke="#f00" stroke-width="4" />
+  <path d="M 30 12 v -6 h 6 a 3 3 0 0 1 -6 6 z" stroke="#f00" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" />
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32">
+    <path d="M6 12V6h6a3 3 0 0 1-6 6"/>
+    <path d="M18 12V6h6a3 3 0 0 1-6 6z" stroke="#f00" stroke-width="4"/>
+    <path d="M30 12V6h6a3 3 0 0 1-6 6" stroke="#f00" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"/>
+</svg>

test/svgo/plugins-order.svg

@@ -8,4 +8,4 @@
 
 @@@
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733 801"><path d="M289 397.4c7.7 24.8 7.8 47.3 7.8 47.3l-2.2 1.6-6.7 8.1-2 7.7 1.1 5.4 4.7 4.7 6.4 4.3 9.3 3.5 12.1 1.2 23.8-2.4 15.3-6.4 7.4-5.5h.2l7.9-7.3 3.4-8.3-2.1-8.3-4.6-5.2-1.9-.5v-.1l9.3-44.4c77.3-50.5 85.1-214.5 85.1-214.5s2.1-40.8-.7-44c-2.8-3.2-28.1-38.7-28.1-38.7l-67.7-18-82 6L233.7 97l-15.2 59.8-2.2 15.5s-7.9 180.5 72.7 225.1z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733 801"><path d="M289 397.4c7.7 24.8 7.8 47.3 7.8 47.3l-2.2 1.6-6.7 8.1-2 7.7 1.1 5.4 4.7 4.7 6.4 4.3 9.3 3.5 12.1 1.2 23.8-2.4 15.3-6.4 7.4-5.5h.2l7.9-7.3 3.4-8.3-2.1-8.3-4.6-5.2-1.9-.5v-.1l9.3-44.4c77.3-50.5 85.1-214.5 85.1-214.5s2.1-40.8-.7-44c-2.8-3.2-28.1-38.7-28.1-38.7l-67.7-18-82 6L233.7 97l-15.2 59.8-2.2 15.5s-7.9 180.5 72.7 225.1"/></svg>