Optimize SVG Online — SVGO Presets in Your Browser

Deep-optimize SVG with SVGO safe, default or aggressive presets. Goes beyond quick minify, and all processing stays local.

Loading…
SVG optimizer and SVGO presets
Deep-optimize SVG with SVGO presets, beyond quick regex minify. Choose safe, balanced or aggressive reduction. Everything stays in your browser.

Developer notes

SVGO loads on demand (~780 KB) only when you optimize, not on minify-svg pages. Safe keeps paths and IDs intact; aggressive may merge paths for smaller output. Input is capped at 512 KB to keep the tab responsive. For quick whitespace removal without SVGO, use minify-svg instead.

Options

SVGO preset
Safe keeps the risk minimal, Default is the balanced SVGO setup, and Aggressive reduces size the most but may alter visuals. The starting value is Default.

When to use this tool

Shrink Figma or Illustrator exports before shipping icons. Compare safe and aggressive output on marketing illustrations. Prepare sprite candidates while keeping title and desc for accessibility. Check one asset at a time without CLI setup.

Worked examples

Marketing badge with metadata

Sample input

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"> <title id="badge-title">Fast delivery badge</title> <desc id="badge-desc">Rounded badge with lightning icon and gradient background.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f97316"/> <stop offset="100%" stop-color="#fb923c"/> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/> </clipPath> </defs> <g clip-path="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)"/> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/> </g> <g font-family="Inter, Arial, sans-serif" fill="#fff"> <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text> <text x="76" y="49" font-size="12" fill-opacity="0.92">Optimized SVG asset</text> </g> </g> </svg>

Output

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"><title id="badge-title">Fast delivery badge</title><desc id="badge-desc">Rounded badge with lightning icon and gradient background.</desc><defs><linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f97316"/><stop offset="100%" stop-color="#fb923c"/></linearGradient><clipPath id="badgeClip"><rect x="0" y="0" width="240" height="72" rx="18" ry="18"/></clipPath></defs><g clip-path="url(#badgeClip)"><rect width="240" height="72" fill="url(#badgeGradient)"/><g transform="translate(20 16)"><circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/><path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/></g><g font-family="Inter, Arial, sans-serif" fill="#fff"><text x="76" y="31" font-size="18" font-weight="700">FastMinify</text><text x="76" y="49" font-size="12" fill-opacity="0.92">Optimized SVG asset</text></g></g></svg>

Default preset savings

Sample input

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"> <title>Star</title> <path fill="currentColor" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z"/> </svg>

Output

Smaller SVG: SVGO strips the whitespace and any comments.

Related SVG tools

Need faster whitespace-only compression? Use minify SVG. Convert to React with SVG to JSX or browse the SVG tools hub.

SVG optimizer FAQ

SVGO presets in the browser

When to use minify-svg vs optimize-svg?

Use minify-svg for quick regex whitespace removal. Use optimize-svg when you need SVGO path cleanup and preset-controlled depth.

Which preset should I choose?

Safe for icons with IDs, default for most production assets, aggressive when byte size matters more than path fidelity.

Is my SVG uploaded?

No. SVGO runs locally once the library has loaded.

Large files?

Inputs above 512 KB are rejected with a clear message to protect browser memory.

Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.