Skip to content
Media

SVG Optimizer

Optimize SVG markup by removing comments, metadata, and whitespace.

svgoptimizeminifycleanvector
Loading tool…

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.

SVG Optimizer examples

Input
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" />
Output
A compact <svg> containing only the circle, with the XML declaration, comment, metadata, and default attributes removed.
Note: The Removed stat reports each stripped attribute and node, and the preview confirms the circle still renders.
Input
The bundled sample file (which ships with the tool pre-loaded).
Output
A single-line SVG with the gradient rect and path intact; savings around 60–70% against the 1 KB original.
Note: The sample is designed to show every category of bloat the optimizer targets.
Input
A document with <g></g> empty groups and indentation between tags.
Output
Empty groups are deleted and all inter-tag whitespace collapses to a single line.
Note: Empty-element removal runs to a fixed point, so nested empties disappear too.

How to use the SVG Optimizer

  1. 1

    Paste your SVG markup into the "SVG markup" textarea, or click "Load sample" to try the demo.

  2. 2

    Use "Clear" to empty the input if you want to start fresh.

  3. 3

    Read the Original, Optimized, Savings, and Removed stats that update live.

  4. 4

    Review the "Optimized SVG" output box and the side-by-side preview to confirm the artwork is unchanged.

  5. 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

Comments, XML declarations, metadata elements, Inkscape/Sodipodi/RDF/CC namespaces, attributes matching SVG default values, empty elements, and whitespace-only text nodes outside text-bearing tags like text, tspan, and title.

It should be visually lossless. Removed attributes are spec defaults, so their absence renders identically. The built-in preview exists precisely to confirm the output still draws correctly.

Namespaces tied to Inkscape, Sodipodi, Dublin Core, Creative Commons, and RDF are removed, along with any metadata blocks. This also deletes the sodipodi:namedview and docname information those editors embed.

No. It performs structural cleanup only — it does not rewrite path data, merge shapes, or round numbers. For those transforms you would need a tool like SVGO.

The tool reports "Malformed XML — check for unclosed tags or invalid syntax" and the output box stays empty until the markup parses cleanly.

No. Parsing, cleanup, and serialization all run in your browser via DOMParser and XMLSerializer. The file never leaves your machine.

Explore more media tools

Browse the full collection of media tools on the hub, or jump back to all categories.

All Media toolsAll categories

Related tools

QR GeneratorColor Palette ExtractorColor Contrast CheckerImage CompressorImage ResizerFavicon GeneratorSocial Image GeneratorCSS Gradient Generator

Did this tool help?

Anonymous — one tap, no sign-up.