Convert Path Commands

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

svgo.config.js

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

Parameters

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

Loading...

Implementation

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