toolready. SVG Optimizer

SVG Optimizer

Minify, strip metadata, collapse groups — SVGO in your browser.

—
—
Visual preview

What this does

Paste SVG markup into the left box — or click Upload file and pick a .svg — and the optimised version appears on the right, with a byte count under each and the percentage difference to one decimal place. Below, two white preview tiles render original and result so you can see at a glance that nothing visible has changed. The optimiser is SVGO, the same library build pipelines use, compiled for the browser and loaded on demand: the first optimisation on a visit fetches a script of roughly 550 KB (uncompressed); after that, results update about 150 ms after you stop typing. Your markup stays in the page — nothing is posted anywhere.

What does SVGO actually remove?

This tool runs SVGO's preset-default, a chain of safe transformations rather than one "minify" step. The main ones: doctype, processing instructions and comments go; editor metadata from Illustrator, Inkscape and Sketch goes; styles are merged and minified; colours are shortened (#ffffff to #fff); numbers are rounded; default attribute values, hidden elements and empty containers are dropped; nested groups collapse; shapes become paths where shorter, paths are merged and their coordinates rewritten compactly; unused namespaces are stripped. <title> is kept, and <desc> survives unless empty or "Created with …" boilerplate, so accessibility text is not silently deleted.

What do the four checkboxes do?

  • Multipass (on by default) — repeats the plugin chain until a pass changes nothing. Slightly slower, a few more bytes saved.
  • Clean up IDs (on) — shortens id attributes and removes unreferenced ones. Untick it if external CSS, JavaScript or <use href="#…"> in another file points at specific IDs.
  • Remove viewBox (off) — leave it off unless you know why you want it. Without a viewBox an SVG cannot scale to its container, which is why SVGO no longer removes it by default; the toggle adds the plugin back for the rare case where a fixed-size icon set wants it gone.
  • Remove width/height (off) — strips the fixed width and height from the root element so the image sizes itself from the viewBox. Turn it on for icons and inline illustrations sized with CSS; leave it off for images that must render at fixed pixel size.

How do I optimise an SVG file?

  1. Upload or paste the source.
  2. Check the right-hand preview matches the left. If a gradient, mask or animation looks wrong, untick Clean up IDs first — it is the option most likely to break references.
  3. Click copy for the clipboard or download to save. The download is always named optimized.svg, so rename it afterwards.

Why did I get an error instead of output?

SVGO parses the input as XML, and XML is strict. A missing closing tag, an unescaped & in an attribute, or a stray character before the opening <svg> stops it cold, and the parser's message appears in a red box below the options. Fix the source and the output regenerates. If the original preview tile is blank, the browser could not render the markup either — a good clue.

Is the optimised SVG safe to use as a favicon or in HTML?

Yes — every transformation is designed to preserve rendering. For an icon you will inline in a page, tick Remove width/height so it takes its size from CSS. For PNG or ICO versions of the same artwork, hand the optimised file to the favicon generator; to embed it as a data URI, use the image to base64 tool. If it only needs to be a raster, converting to PNG or WebP may be smaller still.