SVG Optimizer
Processed Client SideStrip editor metadata, comments, and XML declarations, collapse whitespace, and round path numbers to shrink SVG files — entirely in your browser.
Bookmark this tool now — skip the search next time you need it.
About SVG Optimizer
This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.
Strip the bloat out of SVG files exported from design tools. Illustrator, Figma, Inkscape, and Sketch all leave behind material the browser has no use for — editor namespaces and metadata, XML declarations, comments, and path coordinates carried to a dozen decimal places. This removes all of it and optionally rounds numbers to a precision you choose, which is usually where the biggest saving comes from on icon and illustration files. The result is visually identical markup at a fraction of the size, which matters most for inline SVG, where every byte sits in your HTML. You can paste markup in or load an .svg file straight from disk, and the saving is reported as a live percentage next to the output size so the effect of each setting is immediate.
Key features
- Removes editor-specific namespaces and metadata left by Inkscape, Illustrator, and similar tools
- Strips comments and the XML declaration
- Collapses redundant whitespace between elements and attributes
- Optional number rounding with a configurable decimal precision
- Live size comparison so you can see exactly what each setting saved
- Load an .svg file directly from disk, or paste the markup — the file is read locally and never uploaded
- Saving shown as a percentage alongside the byte count, so you can tell at a glance whether a precision change was worth it
- Warns when the result no longer looks like a well-formed SVG, which catches a bad paste before you ship it
- Syntax-highlighted input and output, so the markup stays readable
- Output is valid SVG you can paste inline or save as a file
- Runs entirely in your browser — unreleased brand assets are never uploaded
How to use it
- Paste your SVG markup into the input pane.
- Leave Round numbers on and choose a precision — 2 decimals is safe for most artwork.
- Compare the before and after sizes.
- Check the output still looks right, then copy it.
Tips & common mistakes
- Number rounding is usually the biggest win. Design tools export coordinates with far more precision than any screen can render, and dropping to two decimals often halves a path.
- Lower the precision carefully on large artwork. Rounding too hard visibly distorts fine curves, and the damage is not always obvious at preview size.
- Optimising matters most for inline SVG, where the markup lives in your HTML on every page load and cannot be cached separately like an image file.
- Remove the width and height attributes and keep viewBox if you want the SVG to scale to its container. Keeping fixed dimensions is the usual reason an inline icon refuses to resize.
- Check the output renders before shipping it. Aggressive optimisation can break SVGs that rely on editor-specific structure, though that is rare with plain icons.
- For icons used repeatedly across a page, an SVG sprite or a symbol reference beats inlining the same optimised markup many times over.
- Compare the saving against a gzipped transfer rather than the raw byte count. Repetitive markup compresses extremely well, so a 40% raw saving on a file served with gzip is a smaller real win than it looks.
- Editor metadata is worth stripping for more than size: Inkscape and Illustrator namespaces can carry layer names and document paths from the machine that made the file, which you may not want shipped.
- Need the optimized result inlined directly into CSS or HTML as a data URI? Convert it with Image to Base64.