Renaming and Deduplicating SVG IDs with SVGO's cleanupIDs Plugin

The Problem

Large SVG files often contain verbose, duplicated, or inconsistent IDs that bloat file size and complicate maintenance. Manually renaming IDs and updating every reference is error-prone. SVGO's cleanupIDs plugin automates this process, generating short unique replacements while ensuring all references remain valid.

Prerequisites

• Node.js version 12 or higher installed
• SVGO installed globally (npm i -g svgo) or locally in your project
• An SVG file containing IDs referenced in elements, <style> blocks, or <script> tags

Run the cleanupIDs Plugin

Execute the following command in your terminal from the directory containing your SVG file:

svgo --enable=cleanupIDs --disable=removeViewBox input.svg -o output.svg

What happens:

1. cleanupIDs scans the document for all ID attributes
2. Builds a map of currently used IDs
3. Generates short unique replacements (e.g., svgjs-12345678)
4. Rewrites all references: href, url(), xlink:href, and CSS selectors

Important: The --disable=removeViewBox flag prevents SVGO from removing the viewBox attribute, which is often needed for responsive SVGs.

Verify the Results

Run these checks to confirm success:

Compare ID changes

grep -o 'id="[^"]*"' input.svg | sort -u > input_ids.txt
grep -o 'id="[^"]*"' output.svg | sort -u > output_ids.txt
diff input_ids.txt output_ids.txt

This shows which IDs were replaced. You should see different output in the diff.

Test in a browser

Open output.svg in a browser. Check the developer console for any warnings about undefined IDs or broken references. Also verify that any styling or scripting that relied on IDs still functions correctly.

Optional: View plugin activity

svgo --enable=cleanupIDs --print=plugins input.svg -o output.svg

Recovery Options

If references are missed or the output is problematic:

• Restore from backup: Keep a copy of the original SVG before processing
• Re-run without cleanupIDs: svgo --disable=cleanupIDs input.svg -o restored.svg
• Customize with prefix: Use --enable=cleanupIDs --id-prefix=myapp- to generate predictable ID prefixes for easier debugging

Known Limitations

• External CSS and runtime JavaScript: IDs referenced in external stylesheets or dynamically constructed via JavaScript will not be rewritten and may break
• ID collisions: SVGO detects and avoids collisions, but extremely constrained namespaces may force fallback to longer names, reducing compression benefits

Practical Example

Consider an SVG with IDs like background-123456 and icon-789012. After running cleanupIDs, these might become svgjs-12345678 and svgjs-87654321, reducing the overall file size while maintaining all functionality.