feat(convertShapeToPath): Optionally convert rects with rounded corners to paths

docs/03-plugins/convert-shape-to-path.mdx

@@ -5,7 +5,7 @@ svgo:
   defaultPlugin: true
   parameters:
     convertArcs:
-      description: If to convert <code>&lt;circle&gt;</code> and <code>&lt;ellipse&gt;</code> elements to paths.
+      description: If to convert <code>&lt;circle&gt;</code>, <code>&lt;ellipse&gt;</code>, and <code>&lt;rect&gt;</code> elements with rounded corners to paths.
       default: false
     floatPrecision:
       description: Number of decimal places to round to, using conventional rounding rules.

plugins/convertShapeToPath.js

@@ -31,34 +31,62 @@ export const fn = (root, params) => {
         if (
           node.name === 'rect' &&
           node.attributes.width != null &&
-          node.attributes.height != null &&
-          node.attributes.rx == null &&
-          node.attributes.ry == null
+          node.attributes.height != null
         ) {
           const x = Number(node.attributes.x || '0');
           const y = Number(node.attributes.y || '0');
           const width = Number(node.attributes.width);
           const height = Number(node.attributes.height);
+          const rx = Math.min(
+            Number(node.attributes.rx || node.attributes.ry || '0'),
+            width / 2,
+          );
+          const ry = Math.min(
+            Number(node.attributes.ry || node.attributes.rx || '0'),
+            height / 2,
+          );
           // Values like '100%' compute to NaN, thus running after
           // cleanupNumericValues when 'px' units has already been removed.
           // TODO: Calculate sizes from % and non-px units if possible.
-          if (Number.isNaN(x - y + width - height)) return;
+          if (Number.isNaN(x - y + width - height + rx - ry)) return;
           /**
            * @type {PathDataItem[]}
            */
-          const pathData = [
-            { command: 'M', args: [x, y] },
-            { command: 'H', args: [x + width] },
-            { command: 'V', args: [y + height] },
-            { command: 'H', args: [x] },
-            { command: 'z', args: [] },
-          ];
+          var pathData;
+          if (rx == 0 || ry == 0) {
+            pathData = [
+              { command: 'M', args: [x, y] },
+              { command: 'H', args: [x + width] },
+              { command: 'V', args: [y + height] },
+              { command: 'H', args: [x] },
+              { command: 'z', args: [] },
+            ];
+          } else if (convertArcs && rx > 0 && ry > 0) {
+            const w = width;
+            const h = height;
+            pathData = [
+              { command: 'M', args: [x + rx, y] },
+              { command: 'H', args: [x + w - rx] },
+              { command: 'A', args: [rx, ry, 0, 0, 1, x + w, y + ry] },
+              { command: 'V', args: [y + h - ry] },
+              { command: 'A', args: [rx, ry, 0, 0, 1, x + w - rx, y + h] },
+              { command: 'H', args: [x + rx] },
+              { command: 'A', args: [rx, ry, 0, 0, 1, x, y + h - ry] },
+              { command: 'V', args: [y + ry] },
+              { command: 'A', args: [rx, ry, 0, 0, 1, x + rx, y] },
+              { command: 'z', args: [] },
+            ];
+          } else {
+            return;
+          }
           node.name = 'path';
           node.attributes.d = stringifyPathData({ pathData, precision });
           delete node.attributes.x;
           delete node.attributes.y;
           delete node.attributes.width;
           delete node.attributes.height;
+          delete node.attributes.rx;
+          delete node.attributes.ry;
         }
 
         // convert line to path

test/plugins/convertShapeToPath.05.svg.txt

@@ -4,6 +4,7 @@ Precision should be applied to all converted shapes
 
 <svg xmlns="http://www.w3.org/2000/svg" width="65mm" height="45mm" viewBox="0 0 65 45">
   <rect x="26.614" y="29.232" width="34.268" height="8.1757"/>
+  <rect x="26.614" y="29.232" width="34.268" height="8.1757" rx="1.0001" ry="0.9999"/>
   <line x1="26.6142" y1="29.2322" x2="34.2682" y2="8.1757"/>
   <polyline points="26.6142,29.2322 34.2682,8.1757"/>
   <polygon points="26.6142,29.2322 34.2682,8.1757"/>
@@ -15,6 +16,7 @@ Precision should be applied to all converted shapes
 
 <svg xmlns="http://www.w3.org/2000/svg" width="65mm" height="45mm" viewBox="0 0 65 45">
     <path d="M26.614 29.232H60.882V37.408H26.614z"/>
+    <path d="M27.614 29.232H59.882A1 1 0 0 1 60.882 30.232V36.408A1 1 0 0 1 59.882 37.408H27.614A1 1 0 0 1 26.614 36.408V30.232A1 1 0 0 1 27.614 29.232z"/>
     <path d="M26.614 29.232 34.268 8.176"/>
     <path d="M26.614 29.232 34.268 8.176"/>
     <path d="M26.614 29.232 34.268 8.176z"/>

test/plugins/convertShapeToPath.06.svg.txt

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="2" width="10" height="6" rx="2" />
+    <rect x="1" y="2" width="10" height="6" ry="2" />
+    <rect x="1" y="2" width="10" height="6" rx="2" ry="9999" />
+    <rect x="1" y="2" width="10" height="6" rx="2" ry="0" />
+    <rect x="1" y="2" width="10" height="6" rx="0" ry="2" />
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 2H9A2 2 0 0 1 11 4V6A2 2 0 0 1 9 8H3A2 2 0 0 1 1 6V4A2 2 0 0 1 3 2z"/>
+    <path d="M3 2H9A2 2 0 0 1 11 4V6A2 2 0 0 1 9 8H3A2 2 0 0 1 1 6V4A2 2 0 0 1 3 2z"/>
+    <path d="M3 2H9A2 3 0 0 1 11 5V5A2 3 0 0 1 9 8H3A2 3 0 0 1 1 5V5A2 3 0 0 1 3 2z"/>
+    <path d="M1 2H11V8H1z"/>
+    <path d="M1 2H11V8H1z"/>
+</svg>
+
+@@@
+
+{ "convertArcs": true }