Convert Colors

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

svgo.config.js

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

Parameters

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

Loading...

Implementation

• https://github.com/svg/svgo/blob/main/plugins/convertColors.js