Add option to convert hex colors to a common case

This adds an option that allows the convertCase parameter to be passed with 'lower' or 'upper' in order to covert all hex colors to a common case. This allows for consistent use of case in converted SVGs. The parameter defaults to false so no changes to the case is applied.
svg · Jan 7, 2024 · c8ccb15 · c8ccb15
1 parent 9334b08
commit c8ccb15
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 22 deletions.
diff --git a/docs/03-plugins/convert-colors.mdx b/docs/03-plugins/convert-colors.mdx
@@ -5,14 +5,17 @@ svgo:
   defaultPlugin: true
   parameters:
     currentColor:
-      description: If to convert all instances of a color to <code>currentColor</code>. This means to inherit the active foreground color, for example in HTML5 this would be the <a href="https://developer.mozilla.org/docs/Web/CSS/color" target="_blank"><code>color</code></a> property in CSS.
+      description: If to convert all instances of a color to <code>currentcolor</code>. This means to inherit the active foreground color, for example in HTML5 this would be the <a href="https://developer.mozilla.org/docs/Web/CSS/color" target="_blank"><code>color</code></a> property in CSS.
       default: false
     names2hex:
       description: If to convert color names to the hex equivalent.
       default: true
     rgb2hex:
-      description: If to convert RGB colors to the hex equivalent, does ignores RGBA.
+      description: If to convert RGB colors to the hex equivalent, ignores RGBA.
       default: true
+    convertCase:
+      description: Convert all color values to either upper or lower case by setting this to <code>'upper'</code>  or <code>'lower'</code> respectively to improve compression. Set to <code>false</code> to disable this behavior.
+      default: 'lower'
     shorthex:
       description: If to convert 6 character hex colors to the 3 character equivalent where possible.
       default: true

diff --git a/docs/03-plugins/remove-attrs.mdx b/docs/03-plugins/remove-attrs.mdx
@@ -10,7 +10,7 @@ svgo:
       description: The pattern syntax used by this plugin is <code>element:attribute:value</code>, this changes the delimiter from <code>:</code> to another string.
       default: ':'
     preserveCurrentColor:
-      description: If to ignore the attribute if it's set to <code>currentColor</code>.
+      description: If to ignore the attribute when it's set to <code>currentcolor</code>.
       default: false
 ---
 

diff --git a/plugins/convertColors.js b/plugins/convertColors.js
@@ -1,4 +1,5 @@
 import { colorsNames, colorsProps, colorsShortNames } from './_collections.js';
+import { includesUrlReference } from '../lib/svgo/tools.js';
 
 export const name = 'convertColors';
 export const description =
@@ -67,6 +68,7 @@ export const fn = (_root, params) => {
     currentColor = false,
     names2hex = true,
     rgb2hex = true,
+    convertCase = 'lower',
     shorthex = true,
     shortname = true,
   } = params;
@@ -89,7 +91,7 @@ export const fn = (_root, params) => {
                 matched = val !== 'none';
               }
               if (matched) {
-                val = 'currentColor';
+                val = 'currentcolor';
               }
             }
 
@@ -118,9 +120,17 @@ export const fn = (_root, params) => {
               }
             }
 
+            if (convertCase && !includesUrlReference(val)) {
+              if (convertCase === 'lower') {
+                val = val.toLowerCase();
+              } else if (convertCase === 'upper') {
+                val = val.toUpperCase();
+              }
+            }
+
             // convert long hex to short hex
             if (shorthex) {
-              let match = val.match(regHEX);
+              let match = regHEX.exec(val);
               if (match != null) {
                 val = '#' + match[0][1] + match[0][3] + match[0][5];
               }

diff --git a/plugins/plugins-types.d.ts b/plugins/plugins-types.d.ts
@@ -29,6 +29,7 @@ type DefaultPlugins = {
     currentColor?: boolean | string | RegExp;
     names2hex?: boolean;
     rgb2hex?: boolean;
+    convertCase?: false | 'lower' | 'upper';
     shorthex?: boolean;
     shortname?: boolean;
   };

diff --git a/plugins/removeAttrs.js b/plugins/removeAttrs.js
@@ -122,14 +122,11 @@ export const fn = (root, params) => {
           if (list[0].test(node.name)) {
             // loop attributes
             for (const [name, value] of Object.entries(node.attributes)) {
+              const isCurrentColor = value.toLowerCase() === 'currentcolor';
               const isFillCurrentColor =
-                preserveCurrentColor &&
-                name == 'fill' &&
-                value == 'currentColor';
+                preserveCurrentColor && name == 'fill' && isCurrentColor;
               const isStrokeCurrentColor =
-                preserveCurrentColor &&
-                name == 'stroke' &&
-                value == 'currentColor';
+                preserveCurrentColor && name == 'stroke' && isCurrentColor;
               if (
                 !isFillCurrentColor &&
                 !isStrokeCurrentColor &&

diff --git a/test/coa/testSvg/test.1.svg b/test/coa/testSvg/test.1.svg
diff --git a/test/coa/testSvg/test.svg b/test/coa/testSvg/test.svg
diff --git a/test/plugins/convertColors.01.svg.txt b/test/plugins/convertColors.01.svg.txt
@@ -12,6 +12,6 @@
     <g color="#000"/>
     <g color="#000"/>
     <path fill="#404040"/>
-    <path fill="#DCDDDE"/>
-    <path fill="#0064FF"/>
+    <path fill="#dcddde"/>
+    <path fill="#0064ff"/>
 </svg>
diff --git a/test/plugins/convertColors.04.svg.txt b/test/plugins/convertColors.04.svg.txt
@@ -11,15 +11,15 @@
 @@@
 
 <svg xmlns="http://www.w3.org/2000/svg">
-    <g color="currentColor"/>
-    <g color="currentColor"/>
+    <g color="currentcolor"/>
+    <g color="currentcolor"/>
     <g color="none"/>
-    <path fill="currentColor"/>
-    <path fill="currentColor"/>
-    <path fill="currentColor"/>
+    <path fill="currentcolor"/>
+    <path fill="currentcolor"/>
+    <path fill="currentcolor"/>
     <path fill="none"/>
 </svg>
 
 @@@
 
-{ "currentColor": true }
+{ "currentColor": true }
diff --git a/test/plugins/convertColors.05.svg.txt b/test/plugins/convertColors.05.svg.txt
@@ -0,0 +1,23 @@
+Do not touch the casing of URL references in color attributes.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+    <linearGradient id="Aa">
+        <stop stop-color="ReD" offset="5%"/>
+    </linearGradient>
+    <text x="0" y="32" fill="gold">uwu</text>
+    <text x="0" y="64" fill="GOLD">owo</text>
+    <text x="0" y="96" fill="url(#Aa)">eue</text>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+    <linearGradient id="Aa">
+        <stop stop-color="red" offset="5%"/>
+    </linearGradient>
+    <text x="0" y="32" fill="gold">uwu</text>
+    <text x="0" y="64" fill="gold">owo</text>
+    <text x="0" y="96" fill="url(#Aa)">eue</text>
+</svg>
diff --git a/test/plugins/removeAttrs.07.svg.txt b/test/plugins/removeAttrs.07.svg.txt
@@ -0,0 +1,27 @@
+The preserveCurrentColor param should be case-insensitive.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+    <linearGradient id="A">
+        <stop stop-color="ReD" offset="5%"/>
+    </linearGradient>
+    <text x="0" y="32" fill="currentColor">uwu</text>
+    <text x="0" y="64" fill="currentcolor">owo</text>
+    <text x="0" y="96" fill="url(#A)">eue</text>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+    <linearGradient id="A">
+        <stop stop-color="ReD" offset="5%"/>
+    </linearGradient>
+    <text x="0" y="32" fill="currentColor">uwu</text>
+    <text x="0" y="64" fill="currentcolor">owo</text>
+    <text x="0" y="96">eue</text>
+</svg>
+
+@@@
+
+{"attrs":"fill", "preserveCurrentColor": true}
diff --git a/test/svgo/keyframe-selectors.svg b/test/svgo/keyframe-selectors.svg