SVG Optimizer

Cut the bloat out of an exported SVG — comments, editor leftovers, default attributes and over-long coordinates.

Runs on your deviceDesign & ColorWorkingNo account needed

What this tool does

SVG Optimizer walks the markup token by token and drops the parts that carry no drawing instruction: comments, the XML declaration and DOCTYPE, <metadata> and the RDF and Creative Commons licence blocks inside it, attributes from a fixed list — version, opacity, stroke-width, stroke-linecap, fill-rule and a dozen more — that are still holding their specification default, and everything left behind by an editor's own namespace — inkscape:, sodipodi:, sketch:, figma:, illustrator: and the rest, along with the xmlns declarations that introduce them. Coordinates in path data, transforms, the viewBox and the geometry attributes are rounded to the number of decimals you set.

Editor exports are verbose for reasons that made sense inside the editor. A shape nudged by hand ends up with eight or nine decimal places per coordinate, which is precision no renderer can show; layer names, guides and page setup are written back into the file so the drawing reopens the way you left it; and paint attributes are stated explicitly even when they match the default, so fill-opacity="1" and stroke-width="1" repeat on every node. None of that reaches the screen, and all of it is paid for on every request when the icon is inlined in HTML or carried in a CSS data URI.

This is a text-level rewriter, not the SVGO plugin chain. It will not merge or re-encode path data, convert shapes to paths, collapse nested groups, rewrite the CSS in a <style> block, round numbers written into a style attribute, or touch a raster image embedded as a data URI — so if a stray 400 KB PNG is what makes your file heavy, nothing here will find it. Rounding is where the drawing itself changes, and it cannot be undone: at zero or one decimal place a large drawing can visibly shift, so look at the result before you ship it. Beyond checking that an <svg> element is present, nothing validates the markup, because the output is never re-parsed — and one malformed case is actively lossy: an attribute written without quotes, width=5 rather than width="5", is not recognised and disappears. Quote everything in a hand-edited file before you run it through.

The whole pass happens in this browser tab: what you paste stays in the page, no request carries it anywhere, and the result is identical with the network switched off. Read that as privacy, not as safety. This is not a sanitiser — a <script> element, an onclick attribute or a reference to an external file all come through untouched, because stripping those is a different job from making a file smaller. An SVG from a source you do not trust is no safer for having been through here, and should not be inlined into a page on that basis.

How to use it

  1. Paste the SVG source. Open the .svg in a text editor and paste the whole thing, or press Load sample to see a typical editor export. One document per run — there is no file picker and no batch mode, and a gzipped .svgz has to be decompressed first.
  2. Pick the rounding precision. Two is the default and is safe for a 24px icon, where a hundredth of a unit is far below a pixel. Raise it towards six for large artwork, a map or anything with a big viewBox; drop it to zero only on a grid-aligned drawing.
  3. Choose what may go. Comments, declarations, metadata, editor namespaces, default attributes and whitespace are removed by default. Removing <title> and <desc>, and removing ids that nothing references, are both opt-in.
  4. Read the summary, then take the result. The line under the output gives bytes before and after, the percentage saved and counts of comments, elements and attributes removed. Copy the markup, or download it as optimised.svg.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Icons going into a sprite sheet

A sprite repeats the same waste across dozens of glyphs, so trimming metadata and precision once per icon compounds across the whole set.

A logo inlined in HTML

Inline SVG is part of the document, not a cached asset, so its bytes are paid for on every page load rather than once.

An export straight out of a vector editor

Layer names, guides, page setup and the editor's namespace declarations describe the workspace, not the drawing, and none of it is read by a browser.

Committing artwork to a repository

Running each version through with the same settings normalises formatting and precision, so the git diff shows shapes that actually changed instead of re-serialised coordinates.

Questions

Is my SVG uploaded anywhere?
No. The optimiser reads the text in the box and rewrites it without ever leaving the tab, so the markup is never sent, logged or kept. Pull the network cable and it behaves exactly as it does now.
Is this SVGO?
No. SVGO parses the document and runs a long plugin chain that rewrites path data, merges groups and converts shapes from one element type to another. This tool does removal and rounding, and nothing beyond that. Each removal it makes has an SVGO plugin equivalent, so treat it as a subset: worth using when you have one file and no build step, not a reason to drop SVGO from a pipeline that already runs it.
Can it change how the drawing looks?
Rounding can, if you set the precision too low for the size of the artwork — that is the trade-off you are choosing. Attribute removal is deliberately narrower than it looks: a value is dropped only when it equals the initial value for that element, so x="0" goes from a <rect> but is kept on <filter>, <mask> and filter primitives, where the initial value is -10% and dropping it would move the region.
Why are <title> and <desc> kept by default?
Screen readers announce them, so on any SVG that conveys meaning rather than decoration they are the accessible name of the image. Removing them is offered as a checkbox for purely decorative shapes, not applied automatically.
Why is removing unused ids switched off?
The reference scan only sees what is in the text you paste. An id targeted by an external stylesheet, by getElementById in a script, or by a fragment link from the surrounding page looks unreferenced here and would be removed. Turn it on for a self-contained file and check the result.
How much smaller will my file actually get?
It depends entirely on the source. A raw editor export with nine-decimal coordinates and a metadata block often loses a substantial share; a hand-written, already-tidy icon may barely move. Remember too that servers usually gzip or brotli SVG in transit, and compression already handles repetitive whitespace — so the saving on the wire is smaller than the raw byte figure suggests.
Can I open a file with it, or export a PNG?
Neither. It takes pasted text and returns pasted text plus a downloadable .svg, so use Convert Image if you need a raster version of the drawing.

Related tools