File Tool

SVG Cleaner

Optimize SVG files by stripping editor metadata, removing bloat, shortening colors, and minifying markup. Smaller files, same quality, zero dependencies.

Install

Get the CLI Tool

Run the SVG cleaner locally as an MCP server, or try it online below.

npx @clinetools/svg-clean
Requires Node.js 18+
  • Editor metadata removal — strips Inkscape, Sketch, and Sodipodi data
  • Color optimization — shortens #AABBCC to #ABC, removes defaults
  • Whitespace & comment removal — collapse bloat, optional minification
  • Detailed report — size comparison and per-optimization breakdown
  • Zero config — just run with npx, no external dependencies
Tutorial

How to Use It

Three ways to clean your SVGs — pick the one that fits your workflow.

1

Try Online

Paste SVG markup into the interactive demo below and see the optimized output instantly.

↓ Jump to interactive demo
2

Use via CLI

Run as a local MCP server and connect any MCP-compatible client to clean SVGs on demand.

npx @clinetools/svg-clean
3

Add to Cline / Claude Code

Add the tool to your MCP settings for instant SVG optimization from your AI assistant.

"svg-clean": { "command": "npx", "args": ["@clinetools/svg-clean"] }

MCP Client Configuration (Cline) 

{
  "mcpServers": {
    "svg-clean": {
      "command": "npx",
      "args": ["@clinetools/svg-clean"]
    }
  }
}

Claude Code Configuration 

# In your project's .mcp.json:
{
  "mcpServers": {
    "svg-clean": {
      "command": "npx",
      "args": ["@clinetools/svg-clean"]
    }
  }
}

Example: Clean an Inkscape SVG 

// Call the tool with SVG markup:
clean_svg({
  svg: "<svg xmlns='...' xmlns:inkscape='...'>...</svg>",
  minify: true,
  removeMetadata: true,
  shortenColors: true,
  removeDefaults: true
})

// Output:
{
  "optimizedSvg": "<svg xmlns='...'>...</svg>",
  "originalSize": 1842,
  "optimizedSize": 312,
  "reductionPercent": 83.06,
  "optimizations": [
    { "type": "remove-metadata", "description": "Removed <metadata> elements", "savedBytes": 245 },
    { "type": "remove-editor-attributes", "description": "Removed editor data attributes", "savedBytes": 380 },
    { "type": "shorten-colors", "description": "Shortened hex colors", "savedBytes": 18 }
  ]
}
Live Demo

Try It Online

Paste SVG markup below and optimize it instantly. Or try one of our demo scenarios.

Paste SVG Markup to Clean

Strips metadata, comments, defaults, and bloat from SVG files

Try a demo:

Paste SVG markup and click Clean SVG to see optimized results.

Learn

Why SVG Optimization Matters

SVG files from design tools carry invisible bloat that inflates file sizes and slows rendering. Understanding the problem helps you fix it.

Why SVGs Get Bloated

Design tools like Inkscape, Illustrator, and Sketch embed XML declarations, doctype headers, namespace prefixes, and verbose attribute defaults. A simple circle can generate 20 lines of markup when 3 would suffice. Exported SVGs are often 3-10x larger than needed.

Editor Metadata

Inkscape stores layer names, named views, page colors, and RDF metadata. Sketch adds its own namespace attributes. This data is useful in the editor but useless in production — removing it can cut file size by 30-60% with zero visual change.

Path Optimization

Path data often contains unnecessary precision (coordinates with 8+ decimal places), trailing zeros, and redundant commands. Shortening 0.500 to .5 and removing default values like fill="black" saves bytes on every element.

Accessibility

Cleaning SVGs is not just about file size. Removing hidden elements (display="none") and empty groups simplifies the DOM, making SVGs easier for screen readers to parse. Add role="img" and aria-label to keep cleaned SVGs accessible.

Clean Every SVG

Our Pro plan includes batch SVG optimization across your entire codebase with CI/CD integration and automated cleanup.

View Plans