Convert Path Data 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

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

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

Parameters

applyTransformsIf to apply transforms.

applyTransformsStrokedIf to apply transforms to paths with a stroke.

makeArcsIf to convert from curves to arcs when possible. This is an object with two properties, threshold and tolerance.

straightCurvesIf to convert curve commands that are effectively straight lines to line commands.

lineShorthandsIf to convert regular lines to an explicit horizontal or vertical line where possible.

convertToZIf to convert lines that go to the start to a z command.

curveSmoothShorthandsIf to convert curves to smooth curves where possible.

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

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

removeUselessRemove redundant path commands that don't draw anything.

collapseRepeatedCollapse repeated commands when they can be merged into one.

utilizeAbsoluteIf to convert between absolute or relative coordinates, whichever is shortest.

forceAbsolutePathIf to always convert to absolute coordinates, even if it adds more bytes.

Usage example

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

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

Demo

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" fill="red" /> </svg>{ plugins: [ "convertPathData" ] }<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" width="60" height="60" fill="red"/></svg>

Implementation

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