An SVG exported directly from Illustrator, Figma or Sketch typically carries far more than the shapes it visually contains. Editor specific namespaces track layer names and tool state that a browser never reads, empty <g> wrapper groups are left behind by a design tool's own layer structure, and path coordinates are frequently exported with far more decimal places of precision than any screen can actually render. None of that extra content changes what the SVG looks like, which makes removing it one of the safest optimizations available for a vector graphic.
Everything runs locally in your browser using a real DOM parser, so a logo or icon set that has not shipped publicly yet never has to leave your machine to get smaller. That makes it a private way to optimize svg for web use before committing it to a design system.
What this svg optimizer removes
It strips XML comments, the <metadata> element and its contents, and editor specific namespaced attributes such as inkscape: and sodipodi: prefixed values that Inkscape and other tools embed to remember their own editing state. None of these affect rendering in any browser, so removing them is a pure size reduction with zero visual risk, and the result is a genuinely clean svg file with nothing left that a browser would ignore anyway.
It also removes groups that contain no children after the above cleanup, since an empty <g></g> left over from a design tool's layer panel adds bytes and nesting depth without contributing anything visible, and it rounds every numeric coordinate in path data, and in x, y, width and height attributes, to the decimal precision you choose, since a coordinate specified to eight decimal places is virtually always overkill for what a screen can display.
- Removes XML comments and the metadata element entirely.
- Strips editor namespace attributes like inkscape: and sodipodi: that carry no visual meaning.
- Removes empty group elements left over after cleanup.
- Rounds path and coordinate precision to a configurable number of decimal places.
- Leaves viewBox, fill, stroke, gradients and every visually meaningful attribute untouched.
Choosing a path precision setting
Path precision controls how many decimal places survive in path data and coordinate attributes. Two decimal places is accurate to roughly a hundredth of a pixel at typical icon sizes and is the right default for almost every use case, since no screen can render a difference finer than that. One decimal place saves a little more space and is usually still visually indistinguishable for a simple icon, while zero decimal places, whole numbers only, can introduce a barely visible shift in a complex illustration with tightly aligned curves.
Higher precision, three or four decimal places, is worth keeping only for an SVG that will be scaled up dramatically, such as source art for a large print poster, where rounding error becomes visible once magnified far beyond typical screen display sizes.
Why editor metadata accumulates in the first place
Design tools like Illustrator, Figma and Inkscape store extra information in an exported SVG so that reopening the file in the same tool restores layer names, guides and other editing context. That is useful inside the design tool and completely unused by a browser, which only reads the standard SVG elements and attributes that actually describe shapes, colours and structure.
Because this extra content is invisible in a rendered browser but often substantial in file size, an unoptimized export can be two to three times larger than the equivalent hand written SVG describing the exact same visual result. Running an SVG through an optimizer before shipping it is standard practice at any team that cares about page weight.
How this svg optimizer works under the hood
The tool parses the SVG with the browser's DOMParser into a real element tree, then walks that tree removing comments, metadata, unused namespaced attributes and empty groups, and finally applies a regular expression pass scoped specifically to numeric values inside path data and coordinate attributes to round their precision. Working from a parsed tree for the structural cleanup, rather than plain text replacement, is what prevents this tool from accidentally corrupting a gradient reference or a clip path id during the process.
Because everything runs client side, a large icon set can be optimized one file at a time directly in the browser with no upload, no daily limit and no dependency on a build tool or command line utility. Bookmarking this svg optimizer is often faster than adding a build step for a one off cleanup task.
How to optimize an SVG file
- 1
Add your SVG
Paste SVG markup into the input box, or drop an .svg file onto the page. Nothing is uploaded.
- 2
Choose a path precision
Pick how many decimal places to keep in coordinates. 2 decimal places suits almost all icon work.
- 3
Optimize
Run the optimizer to strip comments, metadata, editor namespaces and empty groups.
- 4
Compare and download
Check the before and after size, preview the result, then copy or download the cleaned SVG.
Related tools worth bookmarking
Sources and further reading
- W3C: Scalable Vector Graphics specificationThe official SVG specification describing which elements and attributes actually affect rendering.w3.org
- MDN: The metadata elementThe reference confirming that the metadata element carries no rendering meaning and is safe to remove.developer.mozilla.org
- web.dev: Image optimization basicsGoogle engineering guidance on why removing unused data from an image file improves page load performance.web.dev
Frequently asked questions
Common questions about the svg optimizer.
No, at the default 2 decimal place precision the change is smaller than a screen can render. Everything removed, comments, metadata, editor namespaces and empty groups, has no visual effect in any browser, since none of it is part of the standard SVG rendering model.
A typical export from Illustrator, Figma or Sketch shrinks by 40 to 70 percent, since editor metadata and excess coordinate precision often account for more bytes than the actual path and shape data that gets rendered. A file that is already hand optimized will save less, since there is simply less redundant content left to remove.
Yes, as long as you have the right to use the SVG itself. Metadata and comments carry authoring information for the design tool that created the file, not licensing or attribution data, so removing them affects file size only and does not change the terms under which the artwork can be used.
At zero decimal places, coordinates are rounded to whole numbers, which can introduce a barely visible shift in a complex illustration with fine curves or tightly aligned shapes. For a simple icon this is rarely noticeable, but for detailed artwork, start at 2 decimal places and only lower it if you specifically need the extra size reduction.
No. Parsing and optimization both happen entirely in your browser using DOMParser. Your SVG, including an unreleased logo or icon set, is never transmitted, stored or seen by anyone but you.
Yes, though editor specific metadata that lets a tool restore its own layer names and guides will be gone, so reopening the optimized file may show fewer named layers than the original. The visual shapes, colours and structure are fully preserved, so the artwork itself remains fully editable.