SVG Optimizer Online — Free Browser-Based Minifier

Strip comments, default attributes, editor metadata, useless whitespace, and trim numeric precision. 100% client-side — your SVGs never upload.

Precision2

Source SVG

Optimized SVG

compress

Optimized SVG will appear here.

What is an SVG Optimizer?

An SVG optimizer rewrites SVG markup to remove information that has no visual effect — comments, editor metadata, default attributes, redundant whitespace, and excessive numeric precision. The result is a smaller file that renders pixel-identically. Typical exports from Illustrator, Sketch, Inkscape, and Figma can shrink 30–70% with safe transforms alone.

This optimizer applies the most common 8–10 transforms that the canonical SVGO library performs, using regex-based string transforms in your browser. There is no parser, no DOM, no upload. For deep structural transforms (path merging, gradient simplification) use SVGO locally; for a quick 30–60% browser-side reduction, this tool is enough.

How to optimize SVG online — 4 steps

Paste or drop your SVG. Paste markup directly, drop a .svg file, or click Upload File. Click Load Sample to try an Illustrator-style export.
Pick the transforms. Toggle the checkboxes — strip comments, default attributes, editor metadata, whitespace, and trim precision. Defaults are safe for almost every SVG.
Click Optimize. The transforms run in your browser and report original / optimized size with percentage saved.
Copy or Download. Copy the optimized markup directly into your HTML, CSS, or React component, or download the .min.svg.

Sample input and what the tool produces

Illustrator export (1.2 KB)

<?xml version="1.0" ...?>
<!-- Generated by Adobe Illustrator -->
<!DOCTYPE svg PUBLIC ...>
<svg version="1.1" id="Layer_1"
  xmlns="..." xml:space="preserve"
  style="enable-background:..."
  viewBox="0 0 100 100">
  <circle cx="50.000000" cy="50.000000"
    r="40.000000" fill="#ff0000"
    stroke="none" stroke-width="0" />
</svg>

Optimized output (180 B, -85%)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#ff0000"/></svg>

Safe Transforms

Removes only information that has zero visual effect — comments, defaults, editor metadata, redundant whitespace.

Configurable

Toggle each transform individually and choose numeric precision (0–6 decimal places). Preview side-by-side before downloading.

Browser-Only

Regex transforms run in your browser. Brand logos, product icons, and proprietary illustrations never leave your device.

Common use cases

check_circleShrink Illustrator / Sketch / Inkscape SVG exports for the web
check_circleInline SVG icons in HTML or React without bloating page weight
check_circleReduce SVG sprite sheets used by icon systems
check_circleClean up SVGs from Figma export to remove design tool metadata
check_circleOptimize logos before embedding in CSS as data URIs
check_circlePrepare SVG illustrations for email templates with strict size budgets
check_circleAudit checked-in SVG assets in a repo for unused metadata before commit
check_circleReduce favicon and PWA icon SVG sizes for faster first paint

Browser-based optimizer vs SVGO CLI

Feature	This tool	SVGO CLI
Setup	None — runs in browser	Node.js + npm install svgo
Privacy	100% client-side	100% local CLI
Transform engine	Regex (8–10 transforms)	Real parser (50+ plugins)
Path merging / shape conversion	No	Yes
Typical reduction	30–60%	40–80%
Best for	Quick browser-based cleanup	Build pipelines, max compression

Working with images?

Convert between PNG, JPG, WebP, encode as Base64, or shrink SVGs — all browser-side.

PNG to JPG PNG to WebP Image to Base64

Frequently Asked Questions

Is my SVG uploaded to your servers?

No. Optimization runs entirely in your browser using regex-based string transforms in JavaScript. The SVG is read with FileReader, transformed in memory, and the result is downloaded via a Blob URL — no fetch, no XHR, no upload of any kind. Open DevTools → Network and click Optimize: zero requests are made. Brand logos, product icons, and proprietary illustrations stay on your device.

How much can I shrink an SVG?

Typical reductions: 30–70% for SVGs exported from Illustrator, Sketch, Inkscape, or Figma without optimization; 5–15% for SVGs already hand-tuned by a developer. The biggest gains come from stripping editor metadata blocks (sodipodi:namedview, <metadata>, i:pgf), default attribute values (fill-opacity="1", stroke="none"), and excessive numeric precision (50.000000 → 50). Whitespace collapsing alone usually saves 5–20%.

What does numeric precision mean?

SVG path and shape coordinates are often exported with 6+ decimal places (50.000000) when 1 or 2 are visually identical (50 or 50.0). The precision slider rounds every decimal number in the SVG to N digits after the decimal point. For icons and logos, precision 1–2 is usually invisible; for highly detailed illustrations, use 3–4. The default is 2, which mirrors the SVGO setting most teams use.

What attributes are considered "default"?

SVG attributes that have an inherited or specified default value — for example fill-opacity="1", stroke="none", stroke-width="1", opacity="1", stroke-linecap="butt", stroke-linejoin="miter", stroke-miterlimit="4", stroke-dasharray="none". Removing these has zero visual effect because the renderer applies the same defaults whether or not the attribute is present. The optimizer also removes empty attributes (fill="").

Will optimization break my SVG?

For 99% of SVGs the answer is no — the transforms only remove redundant or default information. Edge cases that may break: (1) SVGs that rely on editor-specific namespaces (e.g. animated SVG using sodipodi metadata for timing), (2) SVGs with CSS that targets attributes literally written in the file (e.g. [stroke="none"] selectors). Always preview the output in the right panel before downloading.

Is this the same as SVGO?

SVGO is the gold-standard Node.js library with 50+ plugins and a real SVG parser. This tool implements the most common 8–10 transforms with regex — fast, browser-native, no dependencies. For maximum compression and tricky structural transforms (path merging, transform collapsing, gradient simplification), use SVGO via npx svgo input.svg locally. For a quick browser-based 30–60% reduction, this tool is enough.

Can I optimize an SVG embedded in HTML or React?

Yes — paste the entire <svg>...</svg> markup. The tool does not require the XML prolog or DOCTYPE. After optimization, copy the result and paste it back into your HTML file or React component. For React/JSX components, replace HTML attribute names like class with className and stroke-width with strokeWidth — those rewrites are not done by this tool.

How do I tell if my SVG was already optimized?

Look for these signs of an unoptimized SVG: (1) <?xml version="1.0"?> and <!DOCTYPE svg> headers — production SVGs do not need these; (2) sodipodi:, inkscape:, or i: namespaces; (3) coordinates with 4+ decimal places like 50.000000; (4) attributes like enable-background or xml:space; (5) more whitespace than markup. If your SVG has any of these, this tool will measurably shrink it.