Optimizing SVGO for CI/CD Pipelines

The Risks of Default SVGO in Automated Pipelines

SVGO (SVG Optimizer) is the industry standard tool for minifying vector assets. However, using out-of-the-box defaults inside a continuous integration pipeline frequently breaks user interfaces in subtle ways:

• ViewBox Destruction: Default presets often strip viewBox in favor of fixed width="24" height="24" attributes, rendering the icon unscalable in responsive flexbox/grid containers.
• Global ID Clashes: When designers export SVGs with internal gradients named #linearGradient-1, inlining multiple SVGs in a React or Vue app causes them all to inherit the first icon's color palette.
• Aggressive Path Merging: Merging distinct subpaths with different opacity or fill rules creates black vector silhouettes.

The Hardened svgo.config.mjs

Here is the battle-tested configuration used across production design systems to achieve 60–80% size reductions without visual breakage:

// svgo.config.mjs
export default {
  multipass: true, // Run optimization passes repeatedly until optimal
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // CRITICAL: Preserve viewBox for responsive CSS scaling
          removeViewBox: false,
          
          // Disable over-aggressive path merging that breaks multi-color icons
          mergePaths: false,
          
          // Strip comments, metadata, and editor namespaces (Figma, Illustrator)
          removeComments: true,
          removeMetadata: true,
          removeEditorsNSData: true
        }
      }
    },
    // Prefix internal IDs (masks, gradients) with file hash to avoid collisions
    {
      name: 'prefixIds',
      params: {
        prefixIds: true,
        prefixClassNames: false
      }
    },
    // Convert inline style="" tags into CSS presentation attributes (fill, stroke)
    {
      name: 'convertStyleToAttrs'
    },
    // Set 2 decimal float precision: saves 40% bytes with zero visual warping
    {
      name: 'cleanupNumericValues',
      params: {
        floatPrecision: 2
      }
    },
    // Sort attributes deterministically for cleaner git diffs
    {
      name: 'sortAttrs'
    }
  ]
};

Automating SVGO with GitHub Actions

Add a lightweight GitHub Action workflow to automatically optimize all committed vector assets on pull requests:

# .github/workflows/optimize-svgs.yml
name: Optimize SVGs
on:
  pull_request:
    paths:
      - 'src/assets/icons/**.svg'

jobs:
  svgo:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install SVGO
        run: npm install -g svgo

      - name: Run SVGO Optimization
        run: svgo -f src/assets/icons --config svgo.config.mjs

      - name: Commit Optimized Vectors
        uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: "chore(icons): auto-optimize SVGs via SVGO"

Local Git Pre-Commit Hook with lint-staged

To prevent unoptimized 50 KB Figma exports from ever reaching the remote repository, configure a pre-commit hook in package.json:

{
  "lint-staged": {
    "src/assets/icons/**/*.svg": [
      "svgo --config svgo.config.mjs",
      "git add"
    ]
  }
}

Frequently Asked Questions