What Is SVG Optimization?
SVG optimization strips data a browser does not need: editor metadata, comments, unused IDs, empty groups, attributes that restate a default, and, if you allow it, extra coordinate precision. Exports from Figma, Illustrator and Sketch often carry a lot of this, and the tool shows exactly how many bytes each step saved. This tool cleans them up for production use.
What Gets Removed
Editor metadata — Illustrator/Figma-specific tags and namespaces. Empty groups — <g> elements with nothing inside. Redundant attributes — default values that browsers already apply. Excessive precision — coordinate decimals beyond visible differences. Comments and whitespace — invisible formatting.
How to Use This SVG Optimizer
- Upload or paste your SVG — Select an SVG file from your device, or paste the SVG markup directly into the input.
- Review the optimizations — The tool removes unnecessary metadata, editor junk (from Illustrator/Figma), redundant attributes, and whitespace.
- Compare before and after — See the file size reduction and compare the original and optimized previews side by side. If the result is not valid SVG, the tool says so.
- Download or copy — Download the optimized SVG file or copy the cleaned markup for inline use in HTML.
Worked example: two real-world files, both presets
How much an SVG shrinks depends almost entirely on where it came from. We ran two files through both presets in Chromium on October 12, 2026: the W3C SVG logo from Wikimedia Commons, a small hand-written file, and a test file built the way Inkscape 1.3 saves (editor namespaces, a sodipodi:namedview block, RDF metadata, an empty group and coordinates with six decimals). SVGO 3.3.2, the optimizer most build tools use, is included for comparison. "Pixels changed" compares a 512 × 512 render of the result with the original.
| File | Preset | Size | Gzipped | Pixels changed |
|---|
| Hand-written logo (4,019 B) | Lossless | 3,830 B (−5%) | 1,618 B | 0% |
| Maximum | 3,442 B (−14%) | 1,382 B | 0.44% |
| SVGO 3.3.2 (default) | 3,523 B (−12%) | 1,448 B | 0.12% |
| Editor-style export (14,745 B) | Lossless | 11,804 B (−20%) | 5,483 B | 0% |
| Maximum | 8,060 B (−45%) | 3,243 B | 0.04% |
| SVGO 3.3.2 (default) | 7,859 B (−47%) | 3,312 B | 0% |
Lossless changed no pixels on either file; it removes what renders nothing (comments, metadata, editor data, empty groups, default attributes) and shortens colours. Maximum adds decimal rounding, which is where the extra saving on the editor file comes from, and also where the risk is: the logo has a 100-unit viewBox drawn at 512 px, so each rounded unit becomes five screen pixels and 0.44% of its pixels shifted, mostly along curved edges. For icons with small viewBoxes that are shown large, start with Lossless; for illustrations with long decimal coordinates, Maximum is usually safe, but compare the preview before you ship.
Gzip narrows the gap: a server that compresses SVG (most do) already removes much of the repetition, so the 20% Lossless saving on the editor file becomes 12.5% over the wire. Keep the <title> (the Title option is off by default) if the SVG is meaningful content, since it is the image's accessible name.
Frequently Asked Questions
What is SVG optimization?
Removing data the browser does not need to draw the image: editor metadata and namespaces, comments, the XML declaration, empty groups, unused IDs, attributes that restate a default, and long decimals. This tool runs each of those as a separate step, shows the bytes each one saved, and previews the result next to the original.
Why are SVGs so large from design tools?
Design tools embed their own namespaces and attributes, layer names, comments and long decimal coordinates so the file can be reopened and edited. A browser ignores most of that, so it can go from the copy you put on a website.
What do the Lossless and Maximum presets do?
Lossless turns on every step that leaves the drawing unchanged: XML declaration, comments, metadata and desc, editor data and unused IDs, empty groups, default attributes, color shorthand and whitespace. Maximum adds rounding numbers with three or more decimals to two places, which saves more on detailed paths but can shift very small details. Neither preset removes the title.
What does each option remove?+
XML declaration: the <?xml ...?> line. Comments: <!-- --> blocks. Metadata & desc: <metadata> and <desc> elements. Title: the <title>, which screen readers use as the image's name. Editor data & IDs: Inkscape, Sodipodi, Sketch, Illustrator and Serif namespaces and attributes, data-name, class attributes when the file has no <style>, and IDs nothing in the file references. Empty groups: <g> elements with no content. Default attributes: values such as opacity="1" or stroke="none" when no parent sets that property. Shorten colors: #ffffff to #fff and a few color names to hex. Round decimals: three or more decimals to two. Collapse whitespace: spaces and line breaks between tags.
How much can SVG optimization reduce file size?+
It depends on what the file carries. Exports full of editor metadata and comments shrink the most, while a hand-written icon may lose only its whitespace. The tool reports the total and the saving from each step, so you can see where the bytes went.
Should I use SVG or PNG for icons?+
SVG is almost always better for icons — it's resolution-independent (crisp on any screen), styleable with CSS, animatable, and typically smaller than equivalent PNGs. Use PNG only when you need photographic detail in an icon (rare) or for email templates where SVG support is limited.
Does SVG optimization affect quality?+
The Lossless preset does not change how the SVG looks: it removes metadata, comments, empty groups and unused IDs, shortens colors such as #ffffff to #fff, and drops default attributes only where no parent sets the same property. The Maximum preset also rounds long decimals to two places, which is invisible at normal sizes but can shift very small details. Title removal is a separate option, off by default, because the title is the image's accessible name.
Does optimization keep my SVG editable in Illustrator or Figma?+
Yes with the Lossless preset: it keeps every shape, group with content, class and gradient, so the file opens and edits as before, minus editor-only data such as layer names stored in data-name attributes. The tool does not convert shapes to paths or merge paths. Rounding decimals (Maximum preset) is the only option that changes geometry.
Will optimization break my SVG animations?+
SMIL animations and CSS inside the SVG keep working, because IDs referenced in the file are kept and classes are kept whenever the file has a style element. The risk is outside the file: the Editor data option removes IDs nothing inside the SVG references, so if a script or your page's CSS targets an element by ID, turn that option off.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service