SVG Optimizer

How it works

The file is parsed with the browser's own DOMParser and each enabled pass walks the document tree in turn: comments first, then <metadata> and <desc> blocks, then editor-namespace attributes, then unreferenced ids, then redundant groups, and finally coordinate rounding. The result is re-serialised — minified to one line by default, or pretty-printed if you switch minify off. Nothing is uploaded at any point; the whole pipeline runs in your tab, and the before/after byte counts update live as you toggle passes, so a saving is always attributable to the pass that produced it. The removed-counts line under the numbers says exactly what went: how many comments, elements, attributes, ids and groups.

Geometry is deliberately untouched. There is no path merging and no shape-to-path conversion — those are the passes where optimizers start changing how a file renders, so they are absent by design. Every pass here either removes something invisible or rounds a number, which is why the optimized file draws the same picture as the original.

What each pass actually removes

Comments deletes every <!-- --> node, including the generator banners Illustrator and Inkscape write at the top of the file. Metadata drops <metadata> and <desc> — the RDF licence blocks and export descriptions that no renderer reads — but keeps <title>, which is an accessibility feature, not metadata. Editor attributes strips everything in the private namespaces drawing tools invent for their own use: inkscape:, sodipodi:, sketch:, serif:, adobe: and friends, along with their xmlns: declarations, the version attribute, and editor-only elements such as Inkscape's sodipodi:namedview — state the editor keeps for itself, dead weight everywhere else.

Unreferenced ids is more careful than it sounds. The pass first collects every id the document actually uses — through url(#…) in fills, clips and filters, through href and xlink:href, and through animation begin timings — and only removes an id that appears in none of them, so gradients, clip paths and symbols keep their handles. Collapse groups removes empty <g> elements and unwraps groups that carry no attributes at all, repeating until nothing changes — a group with a transform, class or opacity is doing a job and is left alone. Deeply nested exports often lose hundreds of wrapper groups this way without a visible change.

The precision slider

Vector editors emit coordinates like 23.999999618530273 — fifteen decimals of path data where two would do. The slider rounds every number in geometric and paint attributes (d, points, positions, radii, transforms, stroke widths, opacities, the viewBox) to the chosen number of decimals. Two decimals — the default — is a sub-pixel adjustment at any realistic rendering size, and usually the single largest saving in the tool, because path data is most of most files. Zero decimals is aggressive: on an icon drawn on a 24-unit grid, whole-unit rounding visibly shifts points, so go that low only on large coordinate systems. The rounding is genuinely lossy — the discarded decimals are gone — which is why it is a slider rather than a checkbox: watch the preview, pick the lowest value that still looks identical. The file-size guide works through where the bytes in a typical export actually live.

What is safe and what is not

Most passes are safe by construction: comments, metadata and editor attributes have no effect on rendering, so removing them cannot change the picture. Two options deserve thought. Remove width / height is off by default because it changes behaviour rather than size — the drawing still scales through its viewBox, but a file opened standalone loses its default dimensions. Turn it on for icons that will be sized by CSS. And precision is the one pass that alters data rather than deleting it, as covered above. The id pass has one blind spot: it can only see references inside the file, so a stylesheet or script on the host page that targets #icon-star is invisible to it. For files that external code reaches into, switch that pass off.

When to use it

Straight after exporting from Illustrator, Inkscape or Figma, before the file goes into a repository or onto a page — export cruft is routinely half the bytes of a small icon. Before converting to a React component or a data URI, since both carry the file's weight forward into your bundle or stylesheet. And whenever an icon that should be a kilobyte is somehow forty — run it here and read the removed-counts line to find out what the editor left behind.

Optimizer or formatter?

The optimizer changes what the file contains; the formatter only changes how the markup looks. If you need readable, diffable markup with a guarantee that nothing was removed or rounded, format. If you need fewer bytes, optimize — and note that the minify checkbox here does the formatter's single-line job as its final step, so there is no reason to run both. For files under version control, the useful compromise is optimizing with minify off: the cruft goes, the output stays one element per line, and diffs remain readable.

Common problems

• The file renders at a different size when opened directly. Removing width and height changes the standalone default box; the drawing still scales normally via its viewBox. Keep that pass off for files that get opened as documents rather than embedded.
• A gradient or clip path lost its target. Ids are only removed when nothing in the file references them — but a stylesheet or script outside the file can reference an id the optimizer cannot see. Disable the id pass for files that external code reaches into.
• Curves look subtly off after optimizing. Precision 0 on a small drawing grid visibly moves points. Two decimals is invisible at any realistic display size; go lower only on large coordinate systems.
• The saving is tiny. The file was already optimized, or its weight is not markup: an embedded raster image or a giant path traced from a bitmap does not shrink by removing metadata. The viewer will tell you which of those you have.
• Diffs became useless. Minified output is one long line. Keep minify off for files you version, and let the server's gzip do that work instead.