Aggressive SVG Optimization with SVGO While Preserving Critical IDs and Data Attributes

Desired Outcome

Reduce the size of SVG assets for production without stripping identifiers that downstream CSS, JavaScript, or analytics scripts rely on. The goal is to keep id prefixes like icon- or logo-, class names, and specific data-* attributes (e.g., data-tracking) while removing all other unnecessary markup.

Prerequisites

• Node.js 20+ – SVGO v3 is ESM‑only.
• Project uses a bundler that supports loader options (Vite, Webpack, Rollup).
• SVG assets are stored under src/assets/svg and will be emitted to dist/assets/svg.
• Optional: size-limit or bundlesize dev‑dependency for CI checks.

Configuring SVGO

Create an ESM‑compatible config file svgo.config.cjs (or svgo.config.js if you prefer dynamic imports). The following example demonstrates the core plugins and custom rules needed for aggressive optimization while preserving the required attributes.

module.exports = {
  multipass: true, // re‑run until no further changes
  plugins: [
    {
      name: "cleanupIDs",
      params: {
        // Preserve IDs that start with these prefixes
        preserve: ["^icon-", "^logo-", "^tracking-"]
      }
    },
    {
      name: "removeAttrs",
      params: {
        // Keep only data-tracking and data-test-id, drop others
        attrs: "(data-)(?!tracking-|test-id).*"
      }
    },
    "removeViewBox", // remove only if you control viewport via CSS
    { name: "removeDimensions", params: { preserve: true } },
    "collapseGroups",
    "convertShapeToPath",
    "sortAttrs"
  ]
};

Key points:

• preserve accepts an array of regular expressions. SVGO matches against the full id value; patterns like ^icon- keep any ID that starts with that prefix.
• The removeAttrs regex uses a negative lookahead to drop all data-* attributes except data-tracking and data-test-id.
• Setting multipass: true allows plugins such as collapseGroups to unlock further optimizations in subsequent passes.
• Do not enable removeViewBox unless you are certain the icon will be sized via CSS. The viewBox is essential for responsive scaling.

Example Workflow

1. Run SVGO from the CLI to create a baseline:

npx svgo --config=svgo.config.cjs --multipass \
  --input=src/assets/svg \
  --output=tmp/optimized \
  --recursive

Use --pretty during debugging to read the output.

2. Diff the results to ensure no unintended changes:

diff -r src/assets/svg tmp/optimized || true

Any differences will surface, allowing you to adjust the config before committing.

3. Measure size savings with gzipped output:

npx gzip-size-cli tmp/optimized/*.svg > sizes.txt

4. Integrate into CI (example for GitHub Actions):

steps:
  - uses: actions/checkout@v4
  - name: Install deps
    run: npm ci
  - name: Optimize SVGs
    run: |
      npx svgo --config=svgo.config.cjs --multipass \
        --input=src/assets/svg \
        --output=dist/assets/svg \
        --recursive
  - name: Verify size budget
    run: |
      npm i size-limit --save-dev
      npx size-limit --config size-limit.config.js

The size-limit step can be configured to fail if the gzipped size exceeds a threshold.

Bundler Integration

When SVGs are inlined by a loader (e.g., vite-plugin-svgr or svgr/webpack), pass the same SVGO config via the loader options so the same rules apply at build time.

// vite.config.js
import svgr from "vite-plugin-svgr";

export default {
  plugins: [
    svgr({
      svgo: true,
      svgoConfig: require("./svgo.config.cjs")
    })
  ]
};

For Webpack:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: "@svgr/webpack",
            options: {
              svgo: true,
              svgoConfig: require("./svgo.config.cjs")
            }
          }
        ]
      }
    ]
  }
};

Verification Steps

• Inspect the DOM after a hot‑reload: React DevTools or Vue DevTools should show the preserved id and data-tracking attributes in the rendered SVG.
• Run npx svgo --pretty --show-plugins --config=svgo.config.cjs and confirm the cleanupIDs and removeAttrs plugins list the expected parameters.
• Use gzip-size-cli to compare before/after sizes. A net reduction confirms that the aggressive passes are beneficial.
• For a quick sanity check, open a saved SVG in the browser and verify that CSS selectors like #icon-user still apply.

Common Pitfalls & Recovery

• Regex mismatch: SVGO matches against the entire id string. Ensure your ^icon- pattern covers the full value. If an ID like icon-user-1 is still minified, adjust the regex to ^icon- (unchanged) or add icon- without anchors.
• Over‑optimizing shapes: convertShapeToPath can increase file size for simple shapes. Disable it if you observe size regressions.
• Removed viewBox: If the icon no longer scales, re‑enable removeViewBox or set preserve: true for icons that need it.
• CI CPU waste: Running multipass on already optimized SVGs is idempotent but CPU‑intensive. Gate it with a hash check: only run when source files change.
• CommonJS projects: SVGO v3+ is ESM‑only. Use dynamic import() or install svgo@2 if you cannot migrate.

Conclusion

By tailoring SVGO’s plugin configuration—especially cleanupIDs and removeAttrs—you can aggressively shrink SVGs while keeping the identifiers your application depends on. The multipass pipeline unlocks additional passes, and CI integration ensures regressions are caught early. Use the verification steps above to confirm the output meets both size and functional requirements before deploying to production.