SVG Optimizer with Metadata Stripping and Live Preview

Why optimize SVGs?

SVGs exported from design tools like Figma or Illustrator carry a lot of baggage that never renders: XML declarations, DOCTYPE headers, empty <metadata> and <defs> blocks, editor-specific comments, and empty id/class/style attributes left over from the authoring tool. None of it affects the visible shape, but it does add bytes to every icon and illustration your page loads — and SVGs are often inlined directly in HTML or loaded per-icon, so that overhead multiplies across a page with many icons.

This tool strips that cruft with a text-based pass — comments, XML/DOCTYPE declarations, empty attributes and empty <defs>/<metadata> blocks, and redundant whitespace — while leaving the actual path and shape data untouched.

When to use it

Run exported SVGs through this before committing them to a repo or inlining them in a component, especially icons pulled from a design tool's export panel, which routinely include unused metadata. It's also useful when you're inlining SVG directly into HTML/JSX and want to trim the markup you're embedding, or when auditing why an SVG asset is larger than it visually needs to be.

For icons you plan to use as React components, pair this with the SVG to JSX tool — optimize first to strip cruft, then convert the cleaned markup to JSX-safe attributes.

Example

A typical Illustrator export like <?xml version="1.0" encoding="UTF-8"?>\n<!-- Generator: Adobe Illustrator -->\n<svg xmlns="http://www.w3.org/2000/svg" id="" class="">\n <defs></defs>\n <path d="M10 10 H 90 V 90 H 10 L 10 10" />\n</svg> optimizes down to <svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10 H 90 V 90 H 10 L 10 10"/></svg> — the declaration, comment, empty attributes, and empty defs are gone, and the shape renders identically, as shown in the live preview beneath the output.