SVG Optimizer
Optimize SVG markup by removing comments, metadata, and whitespace.
Recommended tools
Affiliate links — we may earn a commission if you sign up.
About the SVG Optimizer
The SVG Optimizer cleans up vector markup by stripping everything that does not contribute to the image: comments, XML declarations, Inkscape and Sodipodi editor namespaces, RDF and Creative Commons metadata blocks, attributes set to their SVG-spec defaults like fill="black" and stroke-width="1", empty elements, and whitespace-only text nodes outside text-bearing tags. Paste a file exported from Inkscape, Illustrator, or Figma and the tool reports the original size, the optimized size, the savings percentage, and a count of removed attributes and nodes. The optimized result appears in a downloadable output box, with a live preview that renders the cleaned markup so you can confirm nothing visual changed. All processing happens with DOMParser and XMLSerializer inside the browser — no file leaves your machine, and malformed input produces a clear error rather than silent corruption. Hand-edited SVGs pick up indentation, editor metadata, and redundant defaults quickly; this minify SVG markup tool is the difference between shipping a 4 KB icon and a 1.2 KB one. For icon sets, illustrations, and inline web graphics, the savings compound across every page load.
Examples
An Inkscape export beginning with: <?xml version="1.0"?> <!-- Created with Inkscape --> <svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" ...> <metadata><rdf:RDF>...</rdf:RDF></metadata> <circle cx="50" cy="50" r="40" fill="black" stroke="none" stroke-width="1" />
A compact <svg> containing only the circle, with the XML declaration, comment, metadata, and default attributes removed.
The bundled sample file (which ships with the tool pre-loaded).
A single-line SVG with the gradient rect and path intact; savings around 60–70% against the 1 KB original.
A document with <g></g> empty groups and indentation between tags.
Empty groups are deleted and all inter-tag whitespace collapses to a single line.
How to use
- 1
Paste your SVG markup into the "SVG markup" textarea, or click "Load sample" to try the demo.
- 2
Use "Clear" to empty the input if you want to start fresh.
- 3
Read the Original, Optimized, Savings, and Removed stats that update live.
- 4
Review the "Optimized SVG" output box and the side-by-side preview to confirm the artwork is unchanged.
- 5
Download the result as optimized.svg using the button in the output box.
Common use cases
- Cleaning Inkscape exports before committing icons to a web project.
- Minifying an inline SVG logo to shave bytes from an HTML template.
- Removing metadata that leaks author names and editor versions from published files.
- Preparing an icon sprite where default attributes only add bulk.
- Comparing original versus optimized size to report savings to a client.
- Sanitizing third-party SVG assets that carry unknown editor namespaces.
Best practices
- Always check the preview after optimizing — the pass should be visually lossless.
- Keep a source copy of complex files, since comments and metadata are gone after download.
- Verify text content survives; whitespace inside text elements is deliberately preserved.
- Watch the Savings stat — 25% or more lights up green and signals a worthwhile cleanup.
- Feed optimized output back through the SVG Viewer to confirm it still validates.
Tips
- The Removed stat shows attributes/nodes as a fraction — a quick bloat signal.
- Optimize icons in bulk by pasting exports one after another.
- Use the Load sample button to learn what bloat looks like.
- Re-check files with gradients, since the sample's gradient is the classic keep-this test.
Frequently asked questions
Explore more media tools
Browse the full collection of media tools on the hub, or jump back to all categories.