Cleanup Numeric Values

Default

Rounds numeric values, and removes the unit when it's px as this is the default.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "cleanupNumericValues",
      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: [
    "cleanupNumericValues"
  ]
}

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

Result

Loading...

Implementation

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