Why SVG Files Are So Large (and How to Fix It)

You draw a simple arrow in Figma and export it. The resulting SVG is 12 KB. The same icon in a professional icon library is 300 bytes. Something went very wrong in the export. Here’s exactly why design tool SVG exports are so bloated — and how to fix each cause.

Cause 1: Editor metadata

Design tools embed metadata about themselves and the file’s history in the SVG. Figma adds a comment like <!-- Created with Figma -->. Illustrator embeds entire RDF metadata blocks:

<metadata>
  <rdf:RDF>
    <cc:Work>
      <dc:format>image/svg+xml</dc:format>
      <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
      <dc:title/>
    </cc:Work>
  </rdf:RDF>
</metadata>

This can add 200–600 bytes that the browser never uses. Remove it.

Cause 2: Excessive path precision

Design tools store path coordinates with 6–8 decimal places because they need that precision internally for editing. An icon path might look like:

d="M 5.99999999,12.00000024 L 18.99999985,12.00000024"

These are the same as M 6,12 L 19,12. At 24px display size, the difference between 5.99999999 and 6 is less than 0.000001 pixels — invisible. For icons, 1 decimal place is enough. For complex illustrations at large sizes, 2–3 is fine.

Reducing from 8 to 1 decimal place can shrink path data by 60–70% on its own.

Cause 3: Redundant XML namespaces

Old Illustrator exports include XLink and other XML namespaces that modern SVG doesn’t need:

<svg xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

If your SVG doesn’t use xlink:href, dc:, cc:or rdf: attributes, these namespace declarations are dead weight. Each one adds ~50 bytes.

Cause 4: Hidden layers and invisible elements

Figma and Illustrator export hidden layers as SVG elements with display:noneor visibility:hidden. These are fully rendered in the SVG source:

<g id="layer-hidden" style="display:none">
  <!-- entire complex path that was turned off in design -->
  <path d="M 0,0 L 100,0 L 100,100 ..." />
</g>

Removing these can dramatically shrink complex illustrations that had design explorations turned off in the final version.

Cause 5: Strokes converted to outlines

When you use “Flatten” or “Outline Stroke” in Figma, a simple 2px stroke on a path becomes a filled path that traces the stroke’s outline. A line that was 20 bytes becomes 200 bytes. The visual result is identical, but the file is much larger.

Use strokes directly in SVG when possible:

<!-- Simple, small -->
<path d="M5 12h14" stroke="currentColor" stroke-width="2"/>

<!-- Verbose — same visual result, 5× larger -->
<path d="M5 11h14v2H5z" fill="currentColor"/>

Cause 6: Embedded raster images

If your Figma design includes a bitmap image (photo, texture), the SVG export embeds it as a base64-encoded PNG or JPEG inside a <image> element:

<image href="data:image/png;base64,iVBORw0KGgoAAAANSUh...AAAA=" />

A 20 KB PNG embedded this way adds 27 KB to your SVG (base64 encoding adds ~33% overhead). Extract these to separate image files and reference them externally, or eliminate them from the SVG design entirely.

Cause 7: Unnecessary groups and wrappers

Figma’s layer structure maps directly to SVG group elements. An icon with 10 layers in Figma has 10 nested <g> elements in the export, most of which exist only for design organization and have no visual effect. They add bytes and make the SVG harder to process.

How to fix all of this

Most causes above are fixed automatically by running SVGO:

npx svgo --multipass icon.svg

Or via the svg.dog API (no installation required):

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

Embedded raster images (Cause 6) require manual action — no optimizer will safely extract those for you. Always check your SVG source for data:image/ before assuming an optimizer will handle everything.

For the complete optimization workflow, see how to optimize SVG files. For the technical details of what each removal involves, see how to reduce SVG file size.