PRPickrack

SVG Optimizer

Strip comments, metadata, whitespace; round decimals; shorten colors. Browser-side. Live preview.

Optimization options

Decimals:2
0 bytes
0 bytes

Strip comments, metadata, whitespace; round decimals; shorten colors. Live preview, size diff. Browser-side.

SVG Optimizer shrinks SVG markup by removing what's not visually needed: comments, Inkscape/Sodipodi metadata, XML declarations, default attributes, empty groups, excess whitespace, and trailing-zero decimals in path data. Color codes get shortened too (#aabbcc → #abc, rgb(255,255,255) → #fff, black → #000). Typical savings: 30-70% on hand-drawn SVGs, 10-30% on tool-exported SVGs.

Use it for: shrinking icon SVGs before bundling in a webapp, cleaning Figma/Illustrator/Inkscape exports, reducing inline SVG payloads in HTML emails, or just making generated SVGs human-readable. Browser-side — no upload, your SVG never leaves your tab.

Implementation is pure JavaScript regex passes (no SVGO dependency). Lighter and faster than running SVGO in Node, with the most useful 90% of its optimizations. For deeper plugin-based optimization (path merging, transform flattening), use SVGO CLI in your build pipeline.

Key features

  • 9 toggleable optimizations — Strip comments / DOCTYPE / XML declaration / Inkscape metadata / empty groups / default attributes. Plus: shorten colors, collapse whitespace, round decimals.
  • Adjustable precision — Round path coordinates to 0-6 decimal places. 2 is usually invisible; 0 is most aggressive. Slider to preview tradeoff.
  • Live size diff — Input bytes vs output bytes + percentage savings, updated as you type or toggle options.
  • Side-by-side preview — Both the original and the optimized SVG render visually below their text boxes — verify nothing's broken before copying.
  • Browser-side only — Your SVG content stays in your tab. Useful for proprietary logos, internal product icons, anything you don't want a third-party scanning.

How to use

  1. Step 1: Paste or upload SVG — Click Upload (top-right of input panel) for a .svg file, or paste the markup directly.
  2. Step 2: Tune optimizations — All on by default — usually safe. Decrease decimal precision (e.g., 2 → 1) if path data is huge.
  3. Step 3: Verify preview — Below each text box, the SVG renders. Compare visually. If the optimized version looks broken (rare), toggle off the most-recently-added optimization.
  4. Step 4: Copy or download — Top-right of output panel: Copy to clipboard, or Download as optimized.svg.

When to use

  • Shrink icon library before bundling — 200 icons × 30% smaller = significant bundle savings
  • Clean up Figma SVG export — Figma adds tons of data-figma-* attributes and groups
  • Inkscape file cleanup — Inkscape adds proprietary metadata blocks (sodipodi, inkscape namespaces)
  • Email-safe SVG — strip XML declaration + DOCTYPE so the SVG inlines cleanly in HTML email
  • SEO logo optimization — smaller SVG = faster First Contentful Paint
  • Manual SVG cleanup before committing to git — diff-friendly minified output

Frequently asked questions

Will optimization break my SVG?

Very rarely. The 'Remove default attributes' option assumes SVG defaults (fill=black, stroke=none, opacity=1) — if you rely on inheriting fill=black from a parent group, toggle this off. 'Remove empty groups' is safe. Decimal rounding past 2 places can shift coordinates visibly — preview to check.

How is this different from SVGO?

SVGO is the Node.js CLI standard with 30+ plugins. Pickrack covers the most impactful 90% (the optimizations that fire on every SVG) in a browser-side tool. For build pipelines, use SVGO CLI. For one-off cleanups + clipboard work, Pickrack is faster.

Does it preserve animations / interactions?

Yes — SMIL animations, CSS animations, and interactivity attributes are preserved by default. Only purely-cosmetic metadata is stripped.

What about removing unused IDs and CSS?

Not in v1 — that requires full SVG parsing (not regex). On the roadmap. For now, those optimizations are best done via SVGO CLI.

Can I undo a change if I don't like it?

Toggle the option off and the output updates. Original input is preserved on the left.

Max SVG size?

5MB. Above that the regex passes slow the browser. Use SVGO CLI for huge files.

Related tools

Color Palette Extractor

Extract dominant colors from any image with median-cut quantization. Hex + RGB output, CSS array export. Browser-side.

CSS Gradient Generator

Build linear, radial, or conic CSS gradients with live preview. Multi-stop, angle slider, Tailwind v4 ready.

Image Converter

Convert images between PNG, JPG, WebP, AVIF formats. Batch support, browser-side. No upload.