DEV Community

Dev Nestio
Dev Nestio

Posted on

SVG Optimizer & Minifier — Remove Comments, Metadata & Whitespace Online

SVG Optimizer Built for Developers

I added an SVG Optimizer & Minifier to devnestio — paste your SVG and get a smaller, cleaner output instantly in the browser.

🔗 Try it → svg-optimizer-dev.pages.dev

What it optimizes

✅ Remove XML comments (<!-- ... -->)
✅ Remove <title>, <desc>, <metadata> blocks
✅ Strip <?xml?> processing instructions and <!DOCTYPE>
✅ Collapse whitespace and newlines to a single line
✅ Remove empty attributes (class="", id="")
✅ Remove default attributes (fill="black", opacity="1", stroke="none", etc.)
✅ Remove unused id attributes

Example

Before (420 B):

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by Inkscape -->
<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" display="inline">
  <title>Sample Icon</title>
  <desc>A simple shape</desc>
  <g fill="black" opacity="1" stroke="none">
    <!-- the shape -->
    <circle cx="50" cy="50" r="40" fill="#e74c3c"/>
  </g>
</svg>
Enter fullscreen mode Exit fullscreen mode

After (~110 B):

<svg xmlns="http://www.w3.org/2000/svg"><g><circle cx="50" cy="50" r="40" fill="#e74c3c"/></g></svg>
Enter fullscreen mode Exit fullscreen mode

~74% reduction — no visual change.

Features

  • Side-by-side preview (original vs. optimized)
  • Stats: original size, optimized size, bytes saved, % reduction
  • Comment count and tag count removed
  • Copy output button
  • Load sample SVG to try immediately

Built with

  • Pure Vanilla JS regex-based optimizer
  • No external dependencies, no server upload
  • Cloudflare Pages

Part of devnestio — free developer micro-tools.

Top comments (0)