Last updated
Combined SVG Optimization and Minification
The best SVG size reduction combines both optimization (structural improvements) and minification (whitespace/syntax reduction). Running both passes can reduce SVG file sizes by 60–80% compared to raw exports from design tools.
Typical Size Reductions
| Source | Original | After SVGO | After SVGO + gzip |
|---|---|---|---|
| Illustrator export | 45 KB | 12 KB | 4 KB |
| Inkscape export | 38 KB | 9 KB | 3 KB |
| Figma export | 22 KB | 8 KB | 2.5 KB |
| Hand-written SVG | 5 KB | 4 KB | 1.5 KB |
Build Tool Integration
JavaScript
// Vite plugin (vite-plugin-svgo)
import { defineConfig } from 'vite';
import svgo from 'vite-plugin-svgo';
export default defineConfig({
plugins: [
svgo({
svgoConfig: {
plugins: ['preset-default']
}
})
]
});
// Webpack (image-minimizer-webpack-plugin)
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.svgoMinify,
options: { encodeOptions: { multipass: true } }
}
})
]
}
};