SVG files exported from design tools contain unnecessary metadata and verbose code. Optimization can reduce file sizes by 60-80%.
Why Optimize SVGs
SVGs from Illustrator, Figma, or Sketch include editor metadata, hidden layers, verbose attributes, and excessive decimal precision. A 50KB SVG often compresses to 10-15KB.
SVGO: Essential Tool
Install via npm: npm install -g svgo. Optimize files with: svgo input.svg -o output.svg. For directories: svgo -f ./svgs -o ./optimized.
Manual Cleanup
Before using SVGO: delete hidden layers, remove unused artboards, flatten unnecessary groups, outline text to paths, and simplify complex paths.
Common Optimizations
Remove metadata and comments, reduce decimal precision (10.123456 → 10.12), remove default values, strip unused attributes. SVGO handles most automatically.
Inline vs External SVGs
Inline SVG in HTML for critical icons (no HTTP request, CSS styling possible). Use external files for non-critical graphics (allows caching). Create SVG sprites for multiple icons.