SVG Optimizer
Clean an SVG in your browser: editor metadata, comments, empty groups and long decimals out, preview before and after.
Optimize an SVG
Runs in your browser with the built-in XML parser. The file is not uploaded.
Optimized SVG
What the SVG Optimizer does
An SVG saved from Illustrator, Inkscape or Figma carries a lot that the browser never draws: an XML prolog, a doctype, editor namespaces with the tool's own settings, a metadata block, comments, empty groups left over from layers and coordinates with eight decimal places. A 3 KB icon is often 12 KB on disk. This optimizer parses the file with the browser's own XML parser, removes the dead weight and serialises it back, then shows the original and the result side by side so you can see that nothing visible changed.
The cleanups are: comments, metadata, title and desc (optional, off by default because they help accessibility), Inkscape, Sodipodi and Adobe namespaces and every attribute in them, empty g elements and groups with no attributes that only wrap one child, attributes set to their default value (opacity 1, fill-rule nonzero, stroke-width 1 and similar), numbers rounded to the precision you choose, and whitespace between elements. Optionally the width and height attributes are removed so the image scales with its container, as long as a viewBox is present.
Paste the SVG markup or drop a file. The result stays on your device, and you can copy it or download the optimized file. Two decimals is enough for icons; keep three or four for illustrations with fine curves.
Step by step
- 01Paste the SVG source or pick an .svg file from your computer.
- 02Set the decimal precision (2 is the default) and tick the cleanups you want.
- 03Compare the two previews; they should look identical.
- 04Check the size row for the bytes saved.
- 05Copy the markup for inlining or download the optimized file.
Common questions
The viewBox defines the coordinate system and the aspect ratio. Without a fixed width and height the SVG fills whatever box CSS gives it, which is what you want for a responsive icon or logo. If the SVG has no viewBox the option is disabled, because removing the size would leave the browser with no way to scale it.
For anything drawn at normal sizes, yes. A coordinate on a 24 by 24 icon has no visible difference between 12.3456789 and 12.35. Fine illustrations scaled up a lot may show tiny shifts at one decimal, so leave the precision at two or higher for those.
Not for an inline SVG that carries meaning, such as a chart or an illustration: screen readers announce the title. For decorative icons with aria-hidden you can remove them. The option is off by default.
The browser parser is strict XML. An unclosed tag, an unescaped ampersand in a text node or a missing namespace declaration stops the parse. Open the file in the editor it came from and export it again, or fix the error the message points to.
Keep checking
Image Compressor
Compress and resize JPEG, PNG and WebP images in your browser; nothing is uploaded, download them one by one or all.
Free toolHTML Minifier
Strip comments and collapse whitespace in HTML without touching pre, textarea, script or style blocks.
Free toolCSS Minifier
Minify a stylesheet in your browser: comments, whitespace and trailing semicolons out, strings and url() kept intact.
Free toolResponsive Image Generator
Build img srcset and sizes attributes, or a picture element with WebP and AVIF sources, from a file name and widths.
Want these fixes done for you?
Our team runs the audit, makes the changes and reports the result.