Skip to content
Media

SVG Optimizer

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

svgoptimizeminifycleanvector
Loading tool…

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.

Hand-written guide

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

  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.

Explore more media tools

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