svgo
svgo copied to clipboard
convertcolors.js plugin: shorthex behavior is true even if set to false
How do I ensure svgo does not shorten hex color codes?
I'd like to know whether it is possible and how to change this option from a CLI parameter, but this is what I have tried which I believe has formerly worked in the convertColors.js
config file to not convert e.g. ffffff
hex color fill to fff
; in the convertColors.js
config file:
exports.params = {
currentColor: false,
names2hex: false,
rgb2hex: true,
shorthex: false,
shortname: false
};
I believe the relevant setting there is shorthex: false,
?
It has no effect one way or the other toggling it from true to false. Honestly I wonder if the config file is used at all. However I alter it, and even if I delete it, the conversion comes out the same.
It should work: https://github.com/svg/svgo/blob/898f0a2ca502415dc3088f185029e757ba085c65/plugins/convertColors.js#L92-L95
UPD.
Honestly I wonder if the config file is used at all.
That may be a reason. How do you pass a config?
I believe the code section you cite does the opposite of what I want--I want to preserve long hex. I have tried commenting out that section of the config and it still converts to short hex.
If a config can be passed (the CLI options given by --help
indicate it can be) I don't know how. I have tried passing --config=thisConfigFileInTheSamePath.js
(with radically different options in the local config file) and seen no change in behavior.
In my setup, and perhaps in the code base itself, something else is overriding the convertcolors.js
plugin shorthex
option and the code you cite is never called. I inserted a console.log
debug statement there (in the code under // Convert long hex to short hex
, and never see the console print, whether shorthex
is set to true or false! I see other print statements just fine if I insert them at the start of the file.
I think what is overriding it is another plugin setting. I edited .svgo.yml
to disable all plugins, and long hex colors remain long in output. I haven't yet bothered enabling plugins one by one to see which shortens long hex despite longhex
being set to false in convertcolors.js
.
I managed to narrow it down to the minifyStyles plugin. Apparently, that plugin also converts the colors. If you disable minifyStyles, the colors are left as is.
However, another problem surfaces: convertColors only converts colors in attributes, such as fill="#FF0000"
. Any colors inside a style attribute, such as style="fill:#FF0000"
are left untouched.
Thanks for narrowing that down.
Coincidentally the other day I reworked something in my toolchain to work with short hex also (which might really be what was going on when I opened this issue--I think another tool didn't work with short hex).
Still, if anyone else wants to avoid short hex, what you uncovered might help toward that.
I don't use the minifyStyles
plugin and it still doesn't work. If you add the shorthex: false
parameter to the docs live preview (https://svgo.dev/docs/plugins/convert-colors/), it still outputs three digit hex colors.
If you use the original options it works fine.
If you use the original options it works fine
It sometimes converts the color name to the 3 digit hex code even with shorthex: false
:
It's not really a problem I think.
That's why you need to disable names2hex, probably it's hard coded as "black = #000"
How do I ensure svgo does not shorten hex color codes?
The option should work, I would assume the config may have been passed wrong for the version of SVGO you were using, or wasn't exporting correctly.
This config should work:
svgo.config.js
module.exports = {
plugins: [
{
name: "preset-default",
params: {
overrides: {
convertColors: {
shorthex: false
}
}
}
}
]
}
Any colors inside a style attribute, such as style="fill:#FF0000" are left untouched.
Thanks for raising this, I'll work on it soon.
it still outputs three digit hex colors
That's because the shorthex
option only stops converting long hex colors to short. Other colors may still become short hex as a result of other conversions.
If to convert 6 character hex colors to the 3 character equivalent where possible.
— https://svgo.dev/docs/plugins/convert-colors/#parameters