Cleanup IDs

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 Prefix IDs 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

svgo.config.js

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

Parameters

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

Loading...

Implementation

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