From c8ccb15b0809b26cc2433beed389a7535aa9d036 Mon Sep 17 00:00:00 2001
From: JayLeininger <111921725+JayLeininger@users.noreply.github.com>
Date: Tue, 23 Aug 2022 16:07:21 -0500
Subject: [PATCH] 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.
---
docs/03-plugins/convert-colors.mdx | 7 +++++--
docs/03-plugins/remove-attrs.mdx | 2 +-
plugins/convertColors.js | 14 ++++++++++++--
plugins/plugins-types.d.ts | 1 +
plugins/removeAttrs.js | 9 +++------
test/coa/testSvg/test.1.svg | 2 +-
test/coa/testSvg/test.svg | 2 +-
test/plugins/convertColors.01.svg.txt | 4 ++--
test/plugins/convertColors.04.svg.txt | 12 ++++++------
test/plugins/convertColors.05.svg.txt | 23 +++++++++++++++++++++++
test/plugins/removeAttrs.07.svg.txt | 27 +++++++++++++++++++++++++++
test/svgo/keyframe-selectors.svg | 2 +-
12 files changed, 83 insertions(+), 22 deletions(-)
create mode 100644 test/plugins/convertColors.05.svg.txt
create mode 100644 test/plugins/removeAttrs.07.svg.txt
diff --git a/docs/03-plugins/convert-colors.mdx b/docs/03-plugins/convert-colors.mdx
index 0695f9358..944a545e2 100644
--- 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 currentColor. This means to inherit the active foreground color, for example in HTML5 this would be the color property in CSS.
+ description: If to convert all instances of a color to currentcolor. This means to inherit the active foreground color, for example in HTML5 this would be the color 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 'upper' or 'lower' respectively to improve compression. Set to false 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
index d4646554f..a93553a11 100644
--- 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 element:attribute:value, this changes the delimiter from : to another string.
default: ':'
preserveCurrentColor:
- description: If to ignore the attribute if it's set to currentColor.
+ description: If to ignore the attribute when it's set to currentcolor.
default: false
---
diff --git a/plugins/convertColors.js b/plugins/convertColors.js
index 048504adb..48858f2b7 100644
--- 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
index 71a4a1286..6b06dcb00 100644
--- 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
index 48b3d76cf..c18c2f3ad 100644
--- 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
index d5f98e04d..7ad29142e 100644
--- a/test/coa/testSvg/test.1.svg
+++ b/test/coa/testSvg/test.1.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/test/coa/testSvg/test.svg b/test/coa/testSvg/test.svg
index d5f98e04d..7ad29142e 100644
--- a/test/coa/testSvg/test.svg
+++ b/test/coa/testSvg/test.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/test/plugins/convertColors.01.svg.txt b/test/plugins/convertColors.01.svg.txt
index 27c39880d..90aa8c0da 100644
--- a/test/plugins/convertColors.01.svg.txt
+++ b/test/plugins/convertColors.01.svg.txt
@@ -12,6 +12,6 @@
-
-
+
+
diff --git a/test/plugins/convertColors.04.svg.txt b/test/plugins/convertColors.04.svg.txt
index 4eb6d41bb..0a9d6c26f 100644
--- a/test/plugins/convertColors.04.svg.txt
+++ b/test/plugins/convertColors.04.svg.txt
@@ -11,15 +11,15 @@
@@@
@@@
-{ "currentColor": true }
\ No newline at end of file
+{ "currentColor": true }
diff --git a/test/plugins/convertColors.05.svg.txt b/test/plugins/convertColors.05.svg.txt
new file mode 100644
index 000000000..d9477b0f0
--- /dev/null
+++ b/test/plugins/convertColors.05.svg.txt
@@ -0,0 +1,23 @@
+Do not touch the casing of URL references in color attributes.
+
+===
+
+
+
+@@@
+
+
diff --git a/test/plugins/removeAttrs.07.svg.txt b/test/plugins/removeAttrs.07.svg.txt
new file mode 100644
index 000000000..316b9648a
--- /dev/null
+++ b/test/plugins/removeAttrs.07.svg.txt
@@ -0,0 +1,27 @@
+The preserveCurrentColor param should be case-insensitive.
+
+===
+
+
+
+@@@
+
+
+
+@@@
+
+{"attrs":"fill", "preserveCurrentColor": true}
diff --git a/test/svgo/keyframe-selectors.svg b/test/svgo/keyframe-selectors.svg
index 4865c3108..010f05ad8 100644
--- a/test/svgo/keyframe-selectors.svg
+++ b/test/svgo/keyframe-selectors.svg
@@ -9,5 +9,5 @@
-
+