/ Developer

The Vector Scrubber

Figma exports are messy. Don't ship bloated code.

An SVG optimizer strips the cruft a design tool bakes into exported vector code: comments, editor metadata, hidden IDs, redundant namespaces, and slack whitespace. Figma and Illustrator write SVGs for their own round-trip editing, not for the web, so a single icon can ship with a Generator comment, a metadata block, per-layer IDs, and 6-decimal coordinates. Paste it here and the scrubber can cut that weight by 30% or more, leaving markup you can drop straight into a component.

What gets stripped

The scrubber runs these passes, in order:

  • XML prolog, doctype, and <!-- comments -->
  • <metadata>, <title>, and <desc> blocks
  • Editor namespaces (inkscape:, sodipodi:) and throwaway attributes like id and data-name
  • Whitespace between tags, with decimals rounded to 2 places
  • A viewBox and fill="currentColor" added when the root has none

Byte reduction on real exports

Source Before After Saved
Figma icon 195 B 155 B 21%
Illustrator export 357 B 175 B 51%
Inkscape file 339 B 98 B 71%

How it works

Paste your dirty SVG from Figma or Illustrator.

The tool sanitizes the markup right in your browser.

It removes: editor namespaces, weird IDs, comments, and metadata.

It adds: viewBox and fill="currentColor" for flexibility.

Export to Clean SVG, React/JSX, or CSS Data URI.

Why it matters

Design tools generate XML junk - metadata, weird IDs, and comments. This bloats your DOM and hurts performance. This tool scrubs the markup in your browser, stripping the cruft while preserving the geometry. It also formats it for React or CSS instantly, saving you the 'attribute renaming' dance.

Sanitization Steps

1. Remove attributes: id, data-name, enable-background

2. Strip editor namespaces (inkscape:, sodipodi:)

3. Remove XML comments

4. Round decimal precision (10.2342352 → 10.23)

5. Add viewBox and fill="currentColor"

Paste SVG to begin...

Questions people ask

Why are Figma and Illustrator SVG exports so bloated?

Those tools write SVG for their own round-trip editing, not for the web. Every export can carry a Generator comment, a metadata block, per-layer id and data-name attributes, editor namespaces like inkscape and sodipodi, and coordinates with 6 or more decimals. None of it changes how the icon looks, so a scrubber can strip it and cut the file weight by a third or more.

Does cleaning an SVG change how it looks?

No. The scrubber only removes markup the browser ignores: comments, metadata, editor attributes, and extra whitespace. It also rounds coordinates to two decimals, which is far finer than any screen can show. The geometry, colors, and paths stay intact, so the rendered icon is identical, just lighter.

What is fill=currentColor and why add it?

With fill=currentColor the icon paints itself with the CSS color of its container instead of a baked-in hex value. Set color on a parent element and the icon follows it, including on hover or in dark mode. The scrubber adds it to the root svg only when no fill is already set, so a single icon works across themes without editing the file again.