convertColors

Default

Converts color references to the shortest equivalent.

Colors can be represented in various notations, the following table showcases some equivalent colors:

Name	rgb()	#rrggbb	#rgb
`red`	`rgb(255, 0, 0)`	`#ff0000`	`#f00`
`orange`	`rgb(255, 165, 0)`	`#ffa500`
`yellow`	`rgb(255, 255, 0)`	`#ffff00`	`#ff0`
`green`	`rgb(0, 128, 0)`	`#008000`
`blue`	`rgb(0, 0, 255)`	`#0000FF`	`#00f`
`purple`	`rgb(128, 0, 128)`	`#800080`

It makes no difference which format is received by a client, and each one has wide support across browsers and image viewing software.

Usage

Basic
Parameters

svgo.config.js
module.exports = {
  plugins: [
    "convertColors"
  ]
}

svgo.config.js
module.exports = {
  plugins: [
    {
      name: "convertColors",
      params: {
        currentColor: false,
        names2hex: true,
        rgb2hex: true,
        convertCase: "lower",
        shorthex: true,
        shortname: true
      }
    }
  ]
}

Parameters

currentColor: 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.
names2hex: If to convert color names to the hex equivalent.
rgb2hex: If to convert RGB colors to the hex equivalent, ignores RGBA.
convertCase: 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.
shorthex: If to convert 6 character hex colors to the 3 character equivalent where possible.
shortname: If to convert hex colors to the color name, if the color name is shorter then the hex equivalent.

Demo

Live Editor

const svg = `
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0  150 100 " width="150">
  <!-- Created with love! -->
  <defs>
    <ellipse cx="50" cy="50.0" rx="50.00" ry="auto" fill="black" id="circle"/>
  </defs>
  <g>
    <use href="#circle" transform="skewX(16)"/>
    <rect id="useless" width="0" height="0" fill="#ff0000"/>
  </g>
</svg>
`;

const svgoConfig = {
  js2svg: { indent: 2, pretty: true },
  plugins: [
    "convertColors"
  ]
}

render(<SvgoPreview svg={svg} svgoConfig={svgoConfig}/>);

Result