100% browser-based · DOMParser passes · no upload

SVG Optimizer

Optimize SVG markup to shrink size: strip metadata, collapse whitespace, round numeric attributes, remove empty groups. Live preview, runs entirely in your browser via DOMParser and XMLSerializer — nothing is uploaded.

Input SVG

Optimized SVG

Optimization passes

Strip metadataRemove <metadata> elements Strip title / descRemove <title> and <desc> (hurts a11y) Strip commentsRemove  nodes Round numbersRound numeric attribute values Strip extra xmlnsKeep only the SVG namespace Collapse whitespaceCollapse runs of whitespace between tags Remove empty groupsDrop <g> with no children Auto-optimizeRe-run on every change

Decimals (round numbers)

SVG → Base64

Input size

0 B

Output size

0 B

Saved

—

Status

Ready

Example

Bloated SVG in, lean SVG out

Stock SVG export from design tools tends to include metadata, comments, and verbose number precision. The savings on a typical icon are 20–40%.

Input (357 B)

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <metadata>Created by HCODX</metadata>
  <!-- This is a star icon -->
  <g id="layer1">
    <path fill="#3b82f6" d="M12.0000 2.00000 L14.5450 8.50000 …"/>
  </g>
</svg>

Optimized

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#3b82f6" d="M12 2 L14.55 8.5 …"/></svg>

Use cases

What you'll use this for

SVG bloat is a quiet performance tax — every kilobyte of inline SVG ships to every visitor, and editor exports are rarely optimal.

Icon systems

Squeeze the icons in your component library before they end up in the JS bundle.

Hero illustrations

Cut hand-drawn SVG illustrations in half before inlining them in your hero section.

Email templates

Strip the noise before pasting an SVG logo into an email template editor.

CMS uploads

Clean SVGs before uploading to a CMS that does its own broken sanitization.

Step by step

How to optimize an SVG

Paste your SVG

Drop the full <svg …>…</svg> markup into the left editor.

Pick passes

Defaults are conservative. Enable Strip title/desc only if you're sure you don't need accessibility labels.

Compare

The stats bar shows input size, output size, and savings. Eyeball the output for visual changes.

Copy or download

Copy to clipboard or download as .svg — ready to drop into your build.

FAQ

Frequently asked questions

How does it compare to SVGO?

This is a lightweight in-browser optimizer that runs about 7 of SVGO's most useful passes. SVGO itself has dozens of plugins, including aggressive path-data minification and shape-to-path conversion, which this tool deliberately skips to stay simple and safe. For maximum compression run SVGO in your build pipeline.

Will it break my icon?

The default passes are conservative — they remove things the browser ignores anyway: metadata, comments, empty groups. The riskier passes (Strip title/desc, Strip extra xmlns) are off by default. Always compare the before and after visually before shipping.

Why doesn't it minify paths?

Proper path-data minification (collapsing L into implicit lineto, switching to relative coords, merging segments) requires a real SVG path parser. It is the single biggest source of bytes in SVGO output but also the most error-prone. This tool only rounds the numbers inside path data; for full path minification use SVGO or svgo-loader.

Is my SVG sent anywhere?

No. The entire optimization runs in your browser via DOMParser and XMLSerializer. Nothing leaves the tab. You can disconnect from the internet after the page loads and it still works.

What's the typical savings?

For SVGs straight out of Figma, Illustrator, or Inkscape, expect 20–40% reduction with default passes. SVGs that have already been hand-optimized usually shrink by less than 5%. If you see 60%+ savings, double-check the output visually — something significant got removed.

About

About SVG optimization

SVG (Scalable Vector Graphics) is XML — verbose by design. Editor exports tend to ship metadata, editor-specific attributes, comments, and high-precision coordinates that no browser actually needs. Optimizing the markup is purely a transport win: smaller bytes over the wire, faster parse, smaller bundles.

The passes this tool runs

Strip metadata — <metadata> elements are ignored by browsers.
Strip title / desc — off by default. These are accessibility labels; only remove if you're sure you don't need them.
Strip comments — XML comments serve no runtime purpose.
Round numbers — sub-pixel precision past 2 decimals is invisible at typical render sizes.
Strip extra xmlns — editor namespaces like xmlns:inkscape or xmlns:sodipodi are dead weight.
Collapse whitespace — runs of whitespace between tags become single spaces or are removed entirely.
Remove empty groups — <g> with no children adds nothing visually.

What it does not do

Path-data rewriting (use SVGO for that).
Shape-to-path conversion.
CSS-style attribute merging.
Reordering or de-duping <defs>.