Convert Transform

Default

Collapse multiple transforms into one, convert matrices to the short aliases, and much more.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "convertTransform",
      params: {
        convertToShorts: true,
        floatPrecision: 3,
        transformPrecision: 5,
        matrixToTransform: true,
        shortTranslate: true,
        shortScale: true,
        shortRotate: true,
        removeUseless: true,
        collapseIntoOne: true
      }
    }
  ]
}

Parameters

convertToShorts

Convert transforms to their shorthand alternatives.

degPrecision

Number of decimal places to round degrees values to, using conventional rounding rules. Used for rotate and skew.

floatPrecision

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

transformPrecision

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

matrixToTransform

If decompose matrices into simple transforms. See Decomposition of 2D-transform matrices for more context.

shortTranslate

If to shorten references to translate with redundant parameters to omit them. i.e. translate(10 0) → translate(10)

shortScale

If to shorten references to scale with redundant parameters to omit them. i.e. scale(2 2) → scale(2)

shortRotate

If to shorten references to rotate with redundant parameters to omit them. i.e. translate(cx cy) rotate(a) translate(-cx -cy) → rotate(a cx cy)

removeUseless

If to remove redundant transforms like translate(0), skewX(0), or skewY(0).

collapseIntoOne

If to multiply transforms into one.

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

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

Result

Loading...

Implementation

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