← Back to tools

SVG Optimizer

Paste SVG markup to clean and minify it. Strips comments, metadata, and unnecessary whitespace.

Input SVG
Optimized SVG
Original
Optimized
Saved

SVG (Scalable Vector Graphics) files exported from design tools like Figma, Illustrator, and Sketch often contain unnecessary data: editor metadata, hidden layers, redundant groups, overly precise coordinates, and default namespaces. This bloat can double or triple the file size.

Optimizing SVGs removes this cruft while preserving visual output. Common optimizations include removing comments and metadata, collapsing unnecessary groups, shortening numeric precision (12 decimal places to 2), merging overlapping paths, and stripping default attribute values the browser already assumes.

Smaller SVGs mean faster page loads, especially on sites with many icons. An optimized icon set can save 50-80% file size compared to raw design tool exports. This tool runs client-side so your SVG code never leaves your browser — important for proprietary icons and brand assets.

This tool in other languages:

Français:
Optimiseur SVG

Español:
Optimizador SVG

Deutsch:
SVG-Optimierer

Português:
Otimizador SVG

日本語:
SVG最適化ツール

中文:
SVG 优化压缩工具

한국어:
SVG 최적화 도구

العربية:
أداة تحسين SVG

Frequently asked questions

How do I optimize an SVG file online?

Paste your SVG markup into the input. The optimizer strips comments, metadata, editor tags (like Adobe Illustrator leftovers), redundant attributes, and unnecessary whitespace. The visible result is identical; file size drops 30-80%. Click Copy Optimized SVG to grab it.

What does SVG optimization actually remove?

Common bloat: XML comments, editor metadata (<sodipodi>, <inkscape>, Adobe tags), empty groups, unused IDs, default-value attributes, redundant namespaces, excessive precision in numbers (17.9999997 → 18), and whitespace between tags. The rendered output is pixel-identical.

Why are SVGs exported from Figma or Illustrator so large?

Design tools add metadata for editing round-trips — grid info, layer names, export history, color profiles, comments. None of it affects rendering, but it can double or triple file size. Running through an optimizer before shipping is standard practice.

Should I inline SVG or use it as an image file?

Inline SVG (<svg>...</svg> in HTML) is best for icons you want to style with CSS (change color on hover, animate, etc.). Image files (<img src="icon.svg">) are better for static illustrations and larger artwork you want cached separately. Optimize either way.

Can I paste an SVG from Figma and have it still work after optimizing?

Yes. Figma exports are typically well-structured and optimize cleanly. Occasionally Figma adds clip paths or masks with complex IDs that the optimizer may simplify — visually inspect the output if your SVG has complex compositing. For simple icons and shapes, there's almost never an issue.