How to Minify SVG Files

When you minify JavaScript or CSS, you strip whitespace and shorten variable names. Minifying SVG is different — it’s a structured XML format, and the techniques that work for text code don’t directly apply. Here’s what SVG minification actually means and how to do it correctly.

SVG minification is not the same as JS/CSS minification

JavaScript minifiers remove whitespace, rename variables, and collapse expressions because the semantics are preserved by the engine. SVG is declarative XML — whitespace inside text nodes can be meaningful, attribute order doesn’t matter, and many optimizations require understanding of the SVG rendering model.

Simply stripping whitespace from an SVG file saves almost nothing. The real savings come from removing structurally redundant content.

What SVG minification does

Whitespace removal (minor savings)

Collapsing indentation and newlines in the markup saves a few bytes. More important: inside<path d="..."> data, spaces between coordinates can often be removed since negative signs serve as implicit delimiters.

<!-- Before -->
<path d="M 10, 20 L 30, 40" />

<!-- After (valid, shorter) -->
<path d="M10 20L30 40"/>

Attribute value shortening

Color values can be shortened: #000000 → #000, rgb(0,0,0) → #000. Default values can be omitted if the SVG specification defines them as default.

Path data optimization

This is where most savings come from. SVGO’s convertPathData plugin:

• Converts absolute coordinates to relative when shorter
• Removes redundant commands (e.g., consecutive L commands become implicit lines)
• Rounds coordinates to the configured precision
• Combines M followed by L into a single command where possible

Element consolidation

Identical adjacent shapes can sometimes be merged. Empty elements, single-child groups, and invisible elements (zero opacity, display:none) are removed.

The right tool: SVGO

SVGO is the standard SVG minifier. It applies about 30 plugins that together implement the transformations above:

# Install once
npm install -g svgo

# Minify a single file
svgo input.svg -o output.svg

# Minify in place (overwrites original!)
svgo --multipass icon.svg

# Minify all SVGs in a folder
svgo -f ./icons -o ./icons-min

The --multipass flag runs SVGO multiple times until no further optimizations are found, typically saving another 2–5% over a single pass.

Via the svg.dog API

The svg.dog API applies SVGO with a tuned config and returns the minified result directly:

curl -X POST https://api.svg.dog/v1/optimize \
  -H "Authorization: Bearer YOUR_KEY" \
  -F "file=@icon.svg" \
  -o icon.min.svg

No installation, no version management. The API always uses the current best practice SVGO config.

What minification won’t do

SVG minification does not:

• Reduce the visual complexity of an illustration — if your SVG has 200 path nodes, it will still have roughly 200 path nodes after minification
• Replace HTTP compression — gzip/brotli on top of minification gives the best results (see SVG compression)
• Fix fundamentally large SVGs — a photograph converted to SVG or an illustration with thousands of anchor points needs to be simplified at the design level first

Verifying minified output

Always open the minified SVG in a browser and compare it to the original at your target display sizes (typically 16px, 24px, 48px). Anti-aliasing differences at very small sizes are normal. Significant shape changes are not.

For automated verification, the svg.dog API returns X-Savings-Percent and X-Optimized-Size headers so you can log how much each file was reduced.

Integrating into your workflow

Minification only helps if you run it consistently. Consider:

• A CI/CD pipeline step that runs SVGO on every commit touching .svg files
• A pre-commit hook that minifies staged SVG files automatically
• A Node.js build script that processes SVGs before they are copied to public/