Skip to content

Commit

Permalink
Add option to convert hex colors to a common case
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
JayLeininger authored and SethFalco committed Jan 7, 2024
1 parent 9334b08 commit c8ccb15
Show file tree
Hide file tree
Showing 12 changed files with 83 additions and 22 deletions.
7 changes: 5 additions & 2 deletions docs/03-plugins/convert-colors.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/03-plugins/remove-attrs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
14 changes: 12 additions & 2 deletions plugins/convertColors.js
Original file line number Diff line number Diff line change
@@ -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 =
Expand Down Expand Up @@ -67,6 +68,7 @@ export const fn = (_root, params) => {
currentColor = false,
names2hex = true,
rgb2hex = true,
convertCase = 'lower',
shorthex = true,
shortname = true,
} = params;
Expand All @@ -89,7 +91,7 @@ export const fn = (_root, params) => {
matched = val !== 'none';
}
if (matched) {
val = 'currentColor';
val = 'currentcolor';
}
}

Expand Down Expand Up @@ -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];
}
Expand Down
1 change: 1 addition & 0 deletions plugins/plugins-types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ type DefaultPlugins = {
currentColor?: boolean | string | RegExp;
names2hex?: boolean;
rgb2hex?: boolean;
convertCase?: false | 'lower' | 'upper';
shorthex?: boolean;
shortname?: boolean;
};
Expand Down
9 changes: 3 additions & 6 deletions plugins/removeAttrs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
Expand Down
2 changes: 1 addition & 1 deletion test/coa/testSvg/test.1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion test/coa/testSvg/test.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions test/plugins/convertColors.01.svg.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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>
12 changes: 6 additions & 6 deletions test/plugins/convertColors.04.svg.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
23 changes: 23 additions & 0 deletions test/plugins/convertColors.05.svg.txt
Original file line number Diff line number Diff line change
@@ -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>
27 changes: 27 additions & 0 deletions test/plugins/removeAttrs.07.svg.txt
Original file line number Diff line number Diff line change
@@ -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}
2 changes: 1 addition & 1 deletion test/svgo/keyframe-selectors.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c8ccb15

Please sign in to comment.