What does SVGO actually remove from an SVG?

Editor exports carry a lot of dead weight: blocks, comments, Inkscape/Illustrator/Sketch namespace attributes, empty groups, unused defs and IDs, attributes set to their default values, and coordinates with six or more decimal places. SVGO strips all of that and rounds numeric precision (3 digits by default here). Rounding usually saves the most, because path data makes up most of a typical file — and a sub-thousandth-of-a-pixel shift is invisible at any realistic render size.

How much smaller will my SVG get — is this the same as compressing it?

Files exported straight from Figma, Illustrator, or Inkscape commonly shrink 30–60%; hand-written or already-optimized SVGs shrink far less. Optimizing (rewriting the markup) and compressing (gzip or brotli on the wire) are different layers that stack — an optimized SVG also compresses better, because shorter numbers and sorted attributes are more repetitive. Unlike JPEG compression there is no quality trade-off: this is lossless minification for vector markup.

Does optimizing change how my SVG looks?

No. SVGO optimization is designed to keep the artwork pixel-identical — it removes invisible cruft like editor metadata, comments, and excess numeric precision. The side-by-side preview lets you confirm the optimized version renders the same as the original.

What do the presets do differently?

Balanced is a safe default; Maximum compression pushes the size down harder; CSS icon is tuned for icons that scale to their container (for example by removing width/height); and Readable pretty-prints the output instead of minifying. Selecting a preset sets the underlying options, which you can then adjust individually.

Should I keep the viewBox?

Usually yes. The viewBox is what lets an SVG scale responsively, so it is kept by default. Removing width/height while keeping the viewBox is a common setup for CSS-sized icons, which is exactly what the “Remove width/height” option enables.

What output formats can I copy or download?

You can export the optimized SVG itself, a raw or base64 data URI, a CSS background rule, an HTML tag, a React JSX component, or a Markdown image. SVG and the data URIs can also be piped to other tools in the suite.

What if the optimized file is larger than the original?

That can happen if the SVG was already optimized — certain settings (like pretty-printing) add bytes. The stats panel flags when the output grew and suggests trying a stronger preset such as Maximum compression.

SVG Optimizer

Shrink SVG files with SVGO — strip editor cruft, metadata and redundant precision while keeping the artwork pixel-identical. Tune every pass, preview before vs. after live, and copy a ready-to-paste SVG, data URI, CSS, <img>, JSX or Markdown snippet. 100% in your browser.

About this ToolHow it works, benefits & use cases

Optimize SVG files online with SVGO, the same optimizer that runs in production build pipelines — here it runs entirely in your browser. Whether you call it optimizing, minifying, or compressing an SVG, the job is the same: strip what does not render and shorten what does, losslessly. Paste markup or drop a .svg file (up to 5MB) and it optimizes live, stripping editor cruft, metadata, and redundant numeric precision while keeping the artwork pixel-identical. Start from a preset (Balanced, Maximum compression, CSS icon, or Readable), then fine-tune every pass: float precision, multiple passes, pretty-print with a chosen indent, keep or drop the viewBox, remove width/height for CSS-scaled icons, minify IDs, strip title and desc, and sort attributes for a better gzip ratio. A side-by-side before/after preview confirms the result renders the same, and a stats panel shows original vs. optimized size with the percentage saved. Export the optimized SVG, or copy it as a data URI (raw or base64), CSS background, an <img> tag, React JSX, or Markdown. SVGO is lazy-loaded and runs entirely client-side.

How to Use

1Paste your SVG markup, or drop/upload a .svg file (max 5MB); click “Load example” to try it instantly.
2Pick a preset — Balanced, Maximum compression, CSS icon, or Readable — under Optimization.
3Fine-tune the options: float precision, multiple passes, pretty-print, keep viewBox, remove width/height, minify IDs, strip title & desc, sort attributes.
4Check the side-by-side preview and the stats panel showing original vs. optimized size and percentage saved.
5Choose an output format (SVG, data URI, CSS, HTML, React JSX, or Markdown) and copy or download the result.

Key Benefits

Real SVGO optimization, the same tool used in production build pipelines
Live, debounced optimization with a before/after preview on a transparency checkerboard
Four presets plus granular control over precision, passes, IDs, viewBox and dimensions
Keeps the artwork pixel-identical — only the bytes change
Stats panel with original size, optimized size, and exact percentage saved
Export as SVG, data URI (raw or base64), CSS background, <img>, React JSX, or Markdown
SVGO is lazy-loaded and runs entirely in your browser — files are never uploaded

Common Use Cases

Cleaning up SVGs exported from Figma, Illustrator, or Sketch before committing them
Removing width/height so an icon scales to its CSS container
Generating a React JSX component from an optimized icon to drop into a codebase
Producing a compact data URI to inline an icon in CSS or HTML without a request
Comparing presets to find the smallest size that still renders identically

SVG source

Drop an SVG file

Click to upload or drag and drop

Accepted: .svg,image/svg+xml • Max 5 MB

SVG only (max 5MB) — or paste the markup below

Paste SVG markup

Optimization

Preset

Safe web defaults — keeps viewBox, minifies, multipass.

Float precision

Decimals kept in coordinates

Multiple passes

Re-run until stable

Pretty-print

Readable, not minified

Keep viewBox

Needed for responsive SVGs

Remove width/height

Scale to container (CSS icons)

Minify IDs

Shorten id/href values

Remove title & desc

Strips accessibility text

Sort attributes

Improves gzip ratio

Preview

Original

—

Optimized

—

The optimized SVG renders identically — only the bytes change.

Output format

SVG

Copy, download, or pipe to another tool.

Output will appear here.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

SVG Optimizer

How to Use

Key Benefits

Common Use Cases

SVG source

Optimization

Preview

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - SVG Optimizer