How to Optimize SVG Files: A Complete Guide

SVG files exported from design tools like Figma or Adobe Illustrator are often far larger than they need to be. They contain editor metadata, redundant attributes, excessive decimal precision, and comments that serve no purpose in a browser. Optimizing SVG removes all of that without changing how the graphic looks.

This guide covers every technique — from one-line tools to manual editing — so you can choose the approach that fits your workflow.

Why SVG files are bloated by default

Design tools optimize for editing, not for delivery. A Figma export typically includes:

• Generator metadata (<!-- Created with Figma -->)
• Unnecessary XML namespaces (xmlns:xlink, xmlns:dc)
• Path coordinates with 6–8 decimal places instead of 1–2
• Empty groups and hidden layers
• Inline styles that could be removed entirely
• Default attribute values that the browser already assumes

All of this adds up. A typical icon exported from Figma weighs 4–8 KB. After optimization, the same icon is often under 1 KB — a 70–85% reduction.

Method 1: Use an automated tool (recommended)

The fastest approach is to run your SVG through an optimizer. These tools apply a set of safe transformations automatically.

SVGO (command line)

SVGO is the de-facto standard. Install it globally and run it on any file:

npm install -g svgo
svgo icon.svg -o icon.min.svg

SVGO applies around 30 plugins by default: removing comments, collapsing groups, rounding coordinates, converting colors to shorter hex codes, and more. The default config is aggressive but safe for most icons.

svg.dog API (zero-config, always up to date)

If you want optimization without managing a local tool, the svg.dog API works with a single HTTP request. It uses the latest version of SVGO under the hood with a tuned default config:

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

The response headers tell you exactly how much was saved: X-Savings-Percent: 74.3. See the API docs for all options.

Method 2: Optimize at export time

Figma's SVG export settings let you control some output quality. In the export panel, enable “Simplify stroke” and adjust decimal precision. For most icons, 1–2 decimal places is enough. This reduces file size before any post-processing.

Illustrator offers similar controls under File → Export → Export As → SVG Settings. Set “Decimal Places” to 1 and disable “Include unused CSS”.

Method 3: Manual optimization

Automated tools miss some things. For complex illustrations or SVGs with interactivity, manual editing gives you full control.

Round path coordinates

Paths like M 12.3456789,45.6789012 rarely need more than 1 decimal place. Rounding to M 12.3,45.7 makes the file smaller and the path data readable. For icons displayed at 24px, sub-pixel precision is imperceptible.

Remove the XML declaration

The <?xml version="1.0" encoding="UTF-8"?> header is not needed when SVG is served with the correct MIME type or inlined in HTML. Remove it.

Simplify viewBox

viewBox="0.00000 0.00000 24.00000 24.00000" should beviewBox="0 0 24 24". Always.

Method 4: Enable HTTP compression

SVG is text, which means it compresses very well with gzip or brotli. Serving a 2 KB SVG with brotli often brings it below 800 bytes over the wire. This requires server configuration — most CDNs handle it automatically. See the full guide on SVG compression.

Which technique saves the most?

For most projects, using SVGO or the svg.dog API plus HTTP compression covers 90% of the possible savings with minimal effort.

Automating SVG optimization

Manual optimization doesn’t scale. For codebases with dozens or hundreds of SVG assets, set up automation:

• Node.js script — call SVGO or the svg.dog API in a build step
• GitHub Actions / CI — run on every PR that touches .svg files
• Batch optimization — process entire icon libraries at once

Checklist: SVG optimization done right

• Run SVGO or an equivalent optimizer on every exported SVG
• Check that the optimized SVG still renders correctly at all required sizes
• Serve SVGs with gzip or brotli compression enabled
• Avoid base64-encoded images inside SVG unless absolutely necessary
• Use SVG sprites for icon sets to reduce HTTP requests
• Automate the process so optimization is never forgotten