Free · SVGO in-browser · React-ready

Clean your SVGs in the browser.

Drop an SVG, get a minified version with a byte-for-byte before/after readout — and a one-click toggle to camelCase attributes for React.

Paste or drop SVG

418 B

Optimized

Hit Optimize to see the cleaned-up output.
How it works

Four steps

  1. 1

    Paste or drop an SVG

    Textarea accepts any raw SVG; dropzone accepts .svg files up to 4 MB.

  2. 2

    Optimize

    SVGO runs locally with the default preset (viewBox preserved) for maximum savings.

  3. 3

    Pick an output

    SVG or React JSX — the latter camelCases attributes and strips the XML prologue.

  4. 4

    Copy or download

    Everything is in your browser; save as .svg or .tsx with one click.

Questions

Frequently asked

Is the SVG uploaded anywhere?+

No. SVGO ships a browser build that runs entirely on the client — no server round-trip. Drop a file, optimize, copy, close the tab.

How much size will I save?+

Depends on the source. Files from Figma or Sketch often have 40–70% overhead (metadata, <title>, <desc>, ids, unused groups). Hand-written optimized SVGs might save only 1–3%. The byte counter shows the exact reduction.

What does the React JSX option change?+

It converts kebab-case attributes (stroke-width, stroke-linecap, clip-path, etc.) to camelCase, removes the XML prologue and comments, and keeps the content paste-ready for a React component file.

Will it break my animations or filters?+

The default preset is conservative — it preserves <filter>, <mask>, <clipPath>, gradient defs, and elements with ids. If you have aggressive animations, eyeball the output before shipping.

More free tools

Keep building

— Shipping to the App Store?

Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.

Explore lokal