cleanupIds

Default

Removes unused IDs, and minifys IDs that are referenced by other elements.

By default, we back off from removing and minifying IDs if a <script> or <style> element is present in the document. You can bypass this behavior by setting the force parameter to true.

info

Between v2 and v3, the plugin ID was renamed from cleanupIDs to cleanupIds, if you've recently migrated and having issues, please double-check the capitalization!

caution

This plugin has been known to cause problems when inlining multiple SVGs in the same parent document. Due to the predictable algorithm used to minify IDs, separate documents that are run though SVGO may end up with clashing IDs.

You can work around this by enabling the prefixIds plugin. Alternatively, you can set the minify parameter to false, however this will not resolve the issue if your SVGs already had clashing IDs to start with.

See facebook/docusaurus#8297 for more context.

Usage

Basic
Parameters

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

svgo.config.js
module.exports = {
  plugins: [
    {
      name: "cleanupIds",
      params: {
        remove: true,
        minify: true,
        preserve: [],
        preservePrefixes: [],
        force: false
      }
    }
  ]
}

Parameters

remove: If to remove all unreferenced IDs.
minify: If to minify referenced IDs.
preserve: Elements with one of these IDs will be ignored.
preservePrefixes: Elements with an ID that starts with one of these prefixes will be ignored.
force: This plugin normally does nothing if a <script> or <style> element is found. Setting this to true will bypass that behaviour, which may result in destructive changes.

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

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

Result