convertPathData

Default

Optimize path commands found in <path>, <glyph>, and <missing-glyph> elements. Path commands are the syntax used in the d attribute, each character represents an instruction to draw paths.

info

You can get more context on path commands on MDN Web Docs.

This plugin uses multiple techniques to either reduce the number of instructions or reduce the attribute length:

Convert between relative or absolute coordinates, whichever is shortest.
Convert between commands. For example, a bézier curve that behaves like a straight line might as well use a line instruction.
Remove redundant commands. For example, a command that moves to the current position can be removed.
Trim redundant delimiters and leading zeros.
Round numeric values using conventional rounding rules.

You can read more about the plugins capabilities by going through the individual parameters.

Usage

Basic
Parameters

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

svgo.config.js
module.exports = {
  plugins: [
    {
      name: "convertPathData",
      params: {
        applyTransforms: true,
        applyTransformsStroked: true,
        straightCurves: true,
        convertToQ: true,
        lineShorthands: true,
        convertToZ: true,
        curveSmoothShorthands: true,
        floatPrecision: 3,
        transformPrecision: 5,
        smartArcRounding: true,
        removeUseless: true,
        collapseRepeated: true,
        utilizeAbsolute: true,
        negativeExtraSpace: true,
        forceAbsolutePath: false
      }
    }
  ]
}

Parameters

applyTransforms: If to apply transforms.
applyTransformsStroked: If to apply transforms to paths with a stroke.
makeArcs: If to convert from curves to arcs when possible. This is an object with two properties, threshold and tolerance.
straightCurves: If to convert curve commands that are effectively straight lines to line commands.
convertToQ: If to convert cubic beziers to quadratic beziers when they effectively are.
lineShorthands: If to convert regular lines to an explicit horizontal or vertical line where possible.
convertToZ: If to convert lines that go to the start to a z command.
curveSmoothShorthands: If to convert curves to smooth curves where possible.
floatPrecision: Number of decimal places to round to, using conventional rounding rules.
transformPrecision: Number of decimal places to round to, using conventional rounding rules.
smartArcRounding: Round the radius of circular arcs when the effective change is under the error. The effective change is determined using the sagitta of the arc.
removeUseless: Remove redundant path commands that don't draw anything.
collapseRepeated: Collapse repeated commands when they can be merged into one.
utilizeAbsolute: If to convert between absolute or relative coordinates, whichever is shortest.
forceAbsolutePath: If to always convert to absolute coordinates, even if it adds more bytes.

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

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

Result