svgo icon indicating copy to clipboard operation
svgo copied to clipboard

convertcolors.js plugin: shorthex behavior is true even if set to false

Open earthbound19 opened this issue 6 years ago • 11 comments

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.

earthbound19 avatar Mar 29 '18 05:03 earthbound19

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?

GreLI avatar Mar 29 '18 07:03 GreLI

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.

earthbound19 avatar Mar 29 '18 15:03 earthbound19

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.

earthbound19 avatar Mar 31 '18 08:03 earthbound19

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.

m-steen avatar May 21 '21 12:05 m-steen

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.

earthbound19 avatar Jun 03 '21 01:06 earthbound19

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.

dsine-de avatar Nov 20 '23 11:11 dsine-de

If you use the original options it works fine. image

KTibow avatar Nov 20 '23 14:11 KTibow

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:

image

dsine-de avatar Nov 20 '23 15:11 dsine-de

It's not really a problem I think.

dsine-de avatar Nov 20 '23 15:11 dsine-de

That's why you need to disable names2hex, probably it's hard coded as "black = #000"

KTibow avatar Nov 20 '23 23:11 KTibow

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

SethFalco avatar Dec 02 '23 13:12 SethFalco