Optimize SVG files

# Install SVGO
npm install -g svgo
 
# Optimize single file
svgo input.svg -o output.svg
 
# Optimize directory
svgo -f ./icons -o ./icons-optimized
 
# With specific plugins
svgo input.svg --config=svgo.config.js

// svgo.config.js
module.exports = {
  plugins: [
    'preset-default',
    'removeDimensions', // Use viewBox instead of width/height
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-name', 'class'] // Remove specific attributes
      }
    },
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [{ 'aria-hidden': 'true' }]
      }
    }
  ]
}

// svgo.config.js - safe defaults
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false, // Keep viewBox for scaling
          removeTitle: false,   // Keep title for accessibility
          removeDesc: false,    // Keep desc for accessibility
        }
      }
    }
  ]
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              svgo: true,
              svgoConfig: {
                plugins: [
                  { name: 'removeViewBox', active: false }
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

// vite.config.js
import svgr from 'vite-plugin-svgr'
 
export default {
  plugins: [
    svgr({
      svgrOptions: {
        svgo: true,
        svgoConfig: {
          plugins: [
            { name: 'removeViewBox', active: false }
          ]
        }
      }
    })
  ]
}

// After SVGR processing, import SVG as component
import { ReactComponent as Logo } from './logo.svg'
 
function Header() {
  return (
    <header>
      <Logo className="logo" aria-label="Company Logo" />
    </header>
  )
}

1. Go to https://jakearchibald.github.io/svgomg/
2. Paste SVG code or upload file
3. Adjust settings visually
4. Download optimized SVG
5. Copy configuration for SVGO CLI

<!-- Before: Illustrator export -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.0 -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="100px" height="100px"
     viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;"
     xml:space="preserve">
  <g id="Layer_1">
    <circle cx="50" cy="50" r="40" fill="#FF0000"/>
  </g>
</svg>
 
<!-- After: Optimized -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#F00"/>
</svg>

// svgo.config.js for animated SVGs
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeHiddenElems: false, // Animations may use hidden elements
          removeUselessDefs: false, // Keep animation definitions
          removeUnknownsAndDefaults: false // Keep animation attributes
        }
      }
    }
  ]
}

# Compare file sizes
ls -la icons/
# Before: icon.svg 15KB
 
svgo icons/icon.svg -o icons/icon.optimized.svg
 
ls -la icons/
# After: icon.optimized.svg 3KB (80% reduction)