Cleanup List of Values

Rounds numeric values in attributes, such as those found in viewBox, enable-background, and points.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "cleanupListOfValues",
      params: {
        floatPrecision: 3,
        leadingZero: true,
        defaultPx: true,
        convertToPx: true
      }
    }
  ]
}

Parameters

floatPrecision

Number of decimal places to round to, using conventional rounding rules.

leadingZero

If to trim leading zeros.

defaultPx

If to remove the units when it's px, as this is the default if not specified.

convertToPx

If to convert absolute units like cm and in to px.

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: [
    "cleanupListOfValues"
  ]
}

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

Result

Loading...

Implementation

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