SVG Optimizer — Shrink SVG Files in Your Browser

An SVG optimizer shrinks SVG files by removing editor cruft, rounding numeric values, and applying a pipeline of small transformations that preserve rendering. This tool runs the standard SVGO library in your browser tab — your SVG never touches a server.

How to use the SVG optimizer

Paste an SVG. Or pick a .svg file from disk. Editor-exported SVGs (Figma, Illustrator, Sketch, Inkscape) shrink the most because they carry generator stamps, redundant defs, and high-precision numbers.
Pick precision. 3 decimal places is the sane default. Drop to 1 for icons that don’t need sub-pixel accuracy.
Toggle plugins. The defaults are the SVGO preset-default set — safe, preserves rendering. The two ⚠ toggles (removeViewBox, removeXMLNS) are unsafe in the wrong context and the tool flags them.
Verify in the Preview tab. The optimized SVG is rendered visually. Compare against the input image — if anything looks different, narrow which plugin caused it.
Copy, download, or share. Output is plain SVG XML. Drop into your code, save to disk, or share the URL-hash link to round-trip the input + plugin settings.

What gets stripped (typical 20–60% savings)

Editor stamps. Figma comments, Adobe Illustrator generator tags, Sketch IDs, Inkscape namespaces.
Whitespace. Indentation, line breaks, padding.
Unused defs. Gradients, clip paths, filters declared but never referenced.
Redundant attributes. fill="black" when black is already the inherited default. stroke-width="1" when 1 is the default.
Long color forms. #ffffff → #fff. rgb(255, 0, 0) → red (when shorter). #ff0000ff → red (alpha drops if 100% opaque).
Decimal noise. 33.3333333 → 33.333 at precision 3, or 33.3 at precision 1.
Empty containers. <g></g> with nothing inside.

What gets preserved

viewBox — keeps the SVG responsive. Toggle off only when fixed-size rendering is acceptable.
xmlns — required for standalone SVG files and <img src=""> references. Toggle off only when inlining into HTML.
<title> and <desc> — accessibility text. Off by default but available to toggle if you have a separate a11y layer.
ARIA attributes — role, aria-label, etc.
IDs referenced by CSS or <use> — SVGO tracks references and won’t strip an ID that’s actively used.

Three editor-export examples

Figma icon (24×24 stroke icon)

Typical Figma SVG: ~400 bytes. After optimize: ~150 bytes. Savings: 60%+.

The pattern: Figma adds <title>, <desc>, multiple <g> wrappers per layer, full hex colors, decimal coordinates. SVGO collapses most of it.

Adobe Illustrator export

Typical Illustrator SVG: bloated with <style> blocks of CSS classes (.st0, .st1, etc), Illustrator comments, xml:space="preserve", and <switch> fallback wrappers. After optimize: classes inlined as fill="...", all wrappers removed. Savings: 50%+.

Inkscape export

Carries <sodipodi> and <inkscape:> namespaces with editing metadata (saved page positions, last-used colors, snap settings). SVGO strips the entire namespace. Savings: 30–40%.

Precision tuning

The numeric precision setting controls how many decimal places SVGO keeps on coordinate values:

Precision	Typical use	Bytes
0	Pixel-grid icons only	smallest
1	Simple icons (24×24 strokes)	very small
3	Default — safe at any DPI	small
5	Technical illustrations	larger
8	Pixel-perfect down to sub-monitor scale	original size

Higher precision matters when the SVG is scaled to extreme sizes (CAD drawings, scientific plots). For 99% of web icons and illustrations, precision 3 is invisible to the eye.

When NOT to optimize

Animated SVGs with timing-sensitive paths. The mergePaths plugin (off by default in conservative preset) can break path-based animations.
SVGs designed for editing. Optimize the deployed version; keep the editor source untouched.
SVGs with external JavaScript that targets specific IDs. Disable cleanupIds to preserve every ID.

How it compares

	bytefork.tools	jakearchibald.github.io/svgomg	nano.svgo.dev
Runs in browser	✓	✓	✓
11 toggleable plugins	✓	✓	partial
Precision slider	✓ 0–8	✓	partial
Preview tab	✓	✓	✓
Share-by-URL hash (no account)	✓	✗	✗
Ad-free	✓	✓	✓

The reference UI for in-browser SVGO is svgomg by Jake Archibald — that’s the same library this tool uses, with the same defaults. bytefork.tools differs in the share-by-URL pattern and the integrated brand-consistent UI; the core optimization is identical.

Privacy and security

A static HTML page with a small initial JavaScript bundle. The SVGO library lazy-loads on first optimization. Once loaded it runs entirely in your browser tab. Network tab in DevTools confirms it — no requests fire when you optimize, switch toggles, or download.

Favicon Generator — generate the favicon bundle from a single source SVG. Optimize the source first.
Image Format Converter — convert raster images (JPG, PNG, WebP) when you can’t get SVG source.
Image Compressor — for the raster-image equivalent of this workflow.

Frequently asked questions

Is my SVG uploaded anywhere?

No. Optimization runs via the SVGO library, lazy-loaded into your browser tab. The library parses + transforms the SVG in JavaScript. Open DevTools → Network and you will see no outbound request with your file contents.

What does SVGO actually do?

A pipeline of small transformations: strip comments and metadata, remove editor-specific cruft (Adobe Illustrator stamps, Figma generator tags, sketch ids), round numeric values to a chosen precision, convert colors to their shortest equivalent (#ffffff → white, rgb() → hex), merge paths, collapse useless groups, remove empty containers. The result is the same SVG visually but in fewer bytes.

How much smaller does an optimized SVG get?

Editor-exported SVGs typically shrink 20-60%. The "Logo with effects" sample loses ~50% by removing the unused gradient definition, redundant decimal places, and uppercase color codes. Already-optimized SVGs (especially hand-written ones) may shrink only 5%.

What does "precision" mean?

Decimal places kept on numeric attributes (coordinates, dimensions, stroke widths). 3 is the conventional default — visually identical at any screen DPI but much smaller than the raw 6-8 decimals Figma and Illustrator emit. Drop to 1 for extra savings on simple icons; bump to 5 for technical illustrations where precision matters.

Why does the "Remove viewBox" toggle have a warning?

The viewBox attribute is what makes an SVG scale responsively. Without it, the SVG renders at its literal width/height and ignores parent container size. Only remove viewBox if you have decided the SVG should render at fixed dimensions everywhere — rare in modern web design.

Why does the "Remove xmlns" toggle have a warning?

Standalone SVG files (`.svg` opened directly in a browser, or referenced via `<img src="…">`) MUST have an xmlns attribute or browsers refuse to render them. Only remove xmlns when the SVG will be inlined as raw HTML — pasted into a JSX component, copied into a Markdown body, or otherwise dropped inside an existing HTML document where the namespace is inherited.

Will it break accessibility?

Default settings preserve <title> and <desc>, which are the SVG equivalents of alt text. Toggle them off only if you have a separate accessibility layer (aria-label on a wrapping element, etc). The default plugin set also keeps ARIA attributes, role="img", and structural elements like <g> when they have an ID or class that may be selected by CSS or JS.

Does it support animations and filters?

SVGO preserves <animate>, <animateMotion>, <filter>, and other dynamic elements. Some plugins (e.g., mergePaths) could break inter-element references; that is why preset-default is conservative. If your SVG has animations or filters, run it through and inspect the result visually before shipping.

Can I batch-optimize multiple files?

Not in this version — paste one SVG at a time. For batch use, install svgo locally (`npm i -g svgo`) and run `svgo --multipass *.svg`.

Is the SVG optimizer really free?

Yes. No signup, no account, no ads, no telemetry on your input. The source is on the project repository.