How to Reduce SVG File Size

April 2, 2025·6 min read

A typical icon exported from Figma is 4–8 KB. After proper optimization it’s under 1 KB. That’s not magic — it’s removing the parts that browsers don’t need. Here’s exactly what to remove and how.

Start with a concrete example

Let’s look at a raw Figma export for a simple arrow icon:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Figma -->
<svg width="24" height="24" viewBox="0.00000 0.00000 24.00000 24.00000"
  fill="none" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="arrow" data-name="Arrow Icon">
    <path d="M 5.00000000,12.00000000 L 19.00000000,12.00000000
             M 12.00000000,5.00000000 L 19.00000000,12.00000000
             M 12.00000000,19.00000000 L 19.00000000,12.00000000"
      stroke="#000000" stroke-width="2.00000000"
      stroke-linecap="round" stroke-linejoin="round"/>
  </g>
</svg>

Size: 512 bytes. After optimization:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M5 12h14M12 5l7 7-7 7" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Size: 164 bytes — a 68% reduction.

What was removed

1. The XML declaration

<?xml version="1.0" encoding="UTF-8"?> is legacy XML syntax. Modern browsers don’t need it. Every SVG served via HTTP with image/svg+xml or embedded in HTML can safely omit it.

2. Comments

 and similar comments add bytes and expose your toolchain. Remove them unconditionally.

3. Unnecessary XML namespaces

xmlns:xlink is only needed if you use xlink:href. Modern SVG uses plain href. If your SVG doesn’t contain xlink: attributes, remove that namespace declaration.

4. Redundant group wrappers

Empty <g> elements and groups with only one child add nesting without any visual or structural purpose. Collapse them. The id and data-name attributes on groups are editor metadata — remove those too unless you need them for JavaScript targeting.

5. Excessive decimal precision

Path coordinates with 8 decimal places (5.00000000) are identical to5 for any icon rendered at screen resolution. Rounding to 1–2 decimal places is safe for icons. For illustrations with fine detail, 2–3 decimal places is sufficient.

6. Default attribute values

stroke="#000000" can be written as stroke="#000". fill="none" is sometimes the SVG default anyway. stroke-width="2.00000000" becomes stroke-width="2". Small savings per attribute, but they add up.

7. Path data simplification

SVGO’s path optimizer merges adjacent M / L commands and converts absolute coordinates to relative when shorter. In the example above, three separate line segments were combined into a single d attribute string, which is also shorter as relative coordinates.

How to apply these changes automatically

Doing this by hand for every file isn’t sustainable. Use an automated tool:

# SVGO (local)
npx svgo icon.svg -o icon.min.svg

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

Both apply all of the transformations above in one pass. The svg.dog API also returns the savings percentage in the response headers so you can log or track it.

What not to remove

Some SVG attributes look removable but aren’t:

viewBox — essential for responsive scaling. Never remove it.
role="img" and aria-label — accessibility attributes. Keep them if your SVG is meaningful content.
id attributes referenced by JavaScript or CSS — only remove IDs that aren’t used elsewhere.
Gradients and clip paths with IDs — these are cross-referenced inside the SVG. Removing or renaming them incorrectly breaks the graphic.

Verifying the result

Always visually compare the original and optimized SVG. Open both in a browser at the sizes you use in production (16px, 24px, 48px). Anti-aliasing differences are normal; pixel-level changes are not.

For icon libraries, an automated snapshot test is worth setting up: render each icon to a canvas at your target size and compare with a stored baseline. Any difference above a threshold triggers a review.