Your SVG Is 10x Bigger Than It Needs to Be

Export an icon from Illustrator. Check the file size. Open it in a text editor.

You'll find: metadata nobody needs, decimal points to 15 places, empty groups, editor-specific cruft, and comments from 2019. A simple logo weighs 50KB when it could be 3KB.

SVG is just XML. Every unnecessary character is bytes your users download.

What Design Tools Add

Illustrator, Figma, Sketch—they all embed extra data:

<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;" xml:space="preserve">

None of that is necessary for rendering. It's metadata for the design tool to re-open the file properly.

The Precision Problem

Design tools use high precision coordinates:

<path d="M12.374892749237,45.293847293847 L67.293847293847,89.374892749237"/>

Browsers round to about 1-2 decimal places anyway. All those digits are wasted bytes.

Better:

<path d="M12.37,45.29 L67.29,89.37"/>

Same visual result, fraction of the size.

Empty Groups and IDs

Export often creates structures like:

<g id="Layer_1">
  <g id="icon">
    <g>
      <path d="..."/>
    </g>
  </g>
</g>

Three nested groups to hold one path. Each group adds bytes. Remove them unless they're doing something (like applying transforms or styles).

IDs are similar. id="XMLID_847_" on every element adds up. Keep IDs you reference in CSS or JavaScript. Remove the rest.

What to Optimize

Remove metadata. Comments, editor info, namespaces you don't use.

Reduce precision. 2-3 decimal places is usually enough.

Flatten groups. Unnecessary nesting serves no purpose.

Clean IDs. Keep referenced ones, remove auto-generated garbage.

Merge paths. Multiple paths that could be one path should be combined.

Remove hidden elements. Layers you hid in the design tool but didn't delete.

When to Keep File Size

Sometimes bigger is correct:

Animations. IDs and groups often serve as animation targets. Don't blindly remove them.

CSS styling. If you're styling SVG with external CSS, you need those IDs and classes.

Future editing. Ultra-optimized SVG is hard to edit. Keep the source file, optimize the production version.

Comparison

Simple icon, before optimization:

Original: 24KB
After removing metadata: 8KB
After reducing precision: 4KB
After cleaning structure: 2KB

That's 12x smaller. Loads faster. Parses faster. Every page load, every user.

Inline vs External

Small SVGs (under 1KB optimized) often work best inlined directly in HTML. No extra HTTP request.

Larger SVGs or reused icons work better as external files that can be cached.

The break-even point depends on your situation. Generally: if you're using an SVG once and it's tiny, inline it. If you're using it repeatedly or it's complex, external file.

---

SVG optimization is free performance. Run your icons through an optimizer before shipping. Takes seconds, saves bytes on every page load, forever.