Fewer decimal places means smaller files. Two is plenty for almost any icon; drop to one for extra savings, raise it if a fine curve looks off in the preview.
Before and after
Drag the handle to wipe between your original on the left and the stripped version on the right. At the default settings, stripping changes nothing you can see; if you recolor below, that shows here too. The checkerboard shows through any transparency.
Colors
Recolor any part of the picture without leaving the page. Open the wheel from any swatch; solid colors also take a typed HEX, RGB, HSL, or CMYK value, and gradient stops take HEX. Every change shows in the preview above and travels into the SVG you copy or download. CMYK converts to RGB, since SVG on the web is RGB, so the preview is the true result.
Stripped SVG
How the stripping works
A design tool has to remember things your website does not care about: which layer a shape lived on, the name you gave a group, the exact zoom you left the canvas at, the version of the app that saved the file. All of that gets written into the SVG. On top of it, exporters keep coordinates to six decimal places and wrap everything in namespaces and a DOCTYPE from an older era of the web.
SVG Stripper parses the markup into a tree, walks it, and removes the parts that do not affect a single pixel: the XML prolog and DOCTYPE, comments and metadata, editor namespaces, attributes already set to their default, identity transforms, and ids that nothing points at. It rounds coordinates to a precision you choose, shortens colors like #FFFFFF to #fff, and folds a plain Illustrator style block back onto the shapes. Then it re-encodes every path the way a human never would: each segment is written in whichever exact form is shortest, absolute or relative, H for a flat line, S for a curve that mirrors the one before it, always the same drawing in fewer bytes. The result comes back minified or formatted, whichever you pick.
It is careful on purpose. A gradient, clip path, or filter is only useful if the id it hangs on survives, so ids that are referenced anywhere are kept. Whitespace inside a <text> element is left exactly as written, because collapsing it would move the words. Animation is a feature, not bloat, so <animate> and its friends stay. When a change might alter the picture, it is not made.
What comes off, and what stays on
The whole trick is knowing the difference. Everything in the left column is weight with no effect on the render. Everything in the right column can change the picture, so it is kept exactly.
Stripped away
- The
<?xml?>prolog and the<!DOCTYPE> - Generator comments and
<metadata>blocks - Illustrator, Inkscape, and Sketch namespaces and their attributes
- Attributes already at their default, like
fill-opacity="1" - Ids that nothing references, and the empty groups around shapes
- Coordinates rounded past the precision you set, and long hex colors
- Path data rewritten to its shortest exact spelling, the same drawing in fewer bytes
- Identity transforms like
translate(0,0), andmatrix(…)that is really a translate <script>, inlineon…handlers, andjavascript:links
Kept exactly
- Every shape and its geometry, down to the chosen precision
- Gradients, patterns, filters, clip paths, and masks
- Any id that is referenced, and the reference that uses it
<title>and<desc>, unless you ask for them to go- Text and the whitespace inside it, byte for byte
fill-rule="evenodd"and other non-default values- Animation:
<animate>,<animateTransform>, and motion paths
Frequently asked questions
Visually, yes, at sensible settings. Removing metadata and comments changes nothing you can see. Rounding coordinates is the one lossy step, and that is why there is a precision control and a before and after preview: two decimal places is invisible for almost any icon, and if a fine curve ever looks off you can raise it or watch it move in the wipe. Everything else is reversible in the sense that it never touched the render in the first place.
No. Before it removes anything, it scans for every reference in the file: a url(#…) fill, an href pointing at an id, and animation timing that names another element. An id that is used anywhere is kept, along with the gradient, clip path, filter, or mask it belongs to. Animation elements are treated as part of the picture and left alone. The test suite runs real gradient, mask, and animated files through and checks that nothing ends up pointing at a missing id.
Nothing leaves your browser. The page is static and the whole thing runs on your device, with no network requests once it has loaded. The preview renders your SVG inside an image element, which browsers load in a restricted mode that cannot run scripts or fetch anything. Disconnect from the internet and it still works, or run it from the source.
SVGO is the deep, plugin-by-plugin optimizer, and it is excellent. This is a smaller, focused tool aimed at the most common job: you copied an SVG out of a design app and want it clean, fast, without installing anything. It handles the big wins from an Illustrator, Figma, or Inkscape export and shows you the result side by side. It does not reshape path geometry or merge shapes the way SVGO's heaviest passes can, on purpose, because those are the passes most likely to surprise you.
Because it takes off everything the file is wearing that it does not need, and keeps only the important parts. 💃 The name makes people smile, and it is honest about the job: strip the bloat, keep the picture.
Yes. Once you paste an SVG, the Colors panel lists every solid fill and every gradient stop it found. Change any of them from the wheel or by typing a HEX, RGB, HSL, or CMYK value, and the new colors go straight into the SVG you copy or download. CMYK is there for convenience and converts to RGB, since SVG on the web is an RGB format, so the preview on screen is the true result. Parts painted the same color move together.
Why I built this
Every icon and illustration across my sites started life in a design tool, and every export arrived three or four times bigger than it needed to be. I kept pasting them into an optimizer, squinting at the result to make sure a gradient had not vanished, then copying it back. I wanted one page that does the strip and shows me the before and after at the same time, so I can trust it at a glance. This is that page.