Last updated
SVG Minification vs Optimization
SVG minification focuses on reducing file size by removing whitespace, comments, and shortening attribute values. SVG optimization goes further — it restructures the SVG, merges paths, converts shapes to paths, and removes semantically redundant elements. Both are often combined in tools like SVGO.
Minification Techniques
| Technique | Example Before | After |
|---|---|---|
| Remove whitespace | <rect x="10" y="10"/> | <rect x="10" y="10"/> |
| Shorten numbers | 10.000000 | 10 |
| Remove comments | <!-- layer 1 --> | (removed) |
| Shorten colors | #ffffff | #fff |
| Remove xmlns | xmlns:xlink="..." | (if unused) |
| Collapse groups | <g><g>...</g></g> | <g>...</g> |
Minifying with SVGO CLI
# Install SVGO
npm install -g svgo
# Minify a single file
svgo input.svg -o output.min.svg
# Minify all SVGs in a directory
svgo -f ./icons -o ./icons-min
# Show size reduction stats
svgo input.svg --pretty --show-plugins
Gzip Compression
SVG files compress extremely well with gzip because they are text-based XML.
A 100KB SVG might compress to 15–20KB with gzip. Serve SVGs with
Content-Encoding: gzip from your web server for maximum performance.
The compressed format is called SVGZ (SVG + gzip) and uses the .svgz extension.