SVG Optimizer

Shrink an SVG with SVGO — sizes before and after, gzipped too — and get it back as a React component.

Processed locally — nothing is uploaded

Input · 633 BOpen .svg

Output

Multiple passesRun until nothing changes. Slightly slower, a little smaller.Strip title, desc, comments and editor dataKeep them for accessible inline icons — a <title> is what a screen reader announces.Shorten colours#ffffff becomes #fff; rgb() becomes hex; named colours where shorter.Remove width and heightThe SVG then scales to its container. The viewBox is always kept.Prefix ids with the file nameSo several SVGs inlined on one page cannot share an id and break each other's gradients.Decimal places3

About SVG Optimizer

Design tools export SVGs with the editor's own metadata, six-decimal coordinates, an id on every group and a width and height that pin the size. SVGO removes what does not draw anything; the switches here cover the decisions that are yours — keep the title for screen readers, drop the dimensions so it scales, prefix ids so two icons on one page cannot fight — and the viewBox is never touched.

An SVG exported from a design tool carries a lot that never draws: an XML prolog, the editor's own namespaces and metadata, comments, an id on every group, coordinates to six decimal places, and a fixed width and height. SVGO is the standard tool for removing it, and it runs here in the browser on one file at a time, with the sizes before and after shown raw and gzipped, because a file that is served compressed shrinks by a different amount than its byte count suggests.

Most of SVGO's plugins are safe defaults and are left on. The switches cover the handful of choices that depend on how the file will be used. Stripping the title and description saves bytes but removes what a screen reader announces for an inline icon, so it is a choice, not a default. Removing width and height makes the SVG scale to its container, which is what an icon in a layout wants and what a fixed-size illustration does not. Prefixing ids matters the moment two optimised SVGs are inlined on one page and share a gradient id.

The viewBox is never removed. SVGO's older versions would drop it when it matched the dimensions, which saved twenty bytes and broke scaling; it is the one attribute that lets an SVG resize, and this tool pins it on regardless of the preset. Decimal precision is a slider because the right value depends on the artwork: three places is invisible on an icon, and a technical drawing may need more.

The second output is a React component. Attributes are converted to their JSX names — class to className, stroke-width to strokeWidth, xlink:href to xlinkHref — an inline style becomes an object, the prolog and comments go, and props are spread onto the root so the caller can set size and class. It is the conversion every icon library performs and everyone does by hand at least once.

Learn how this works

A Practical Guide to Everyday Developer Encoding & FormattingHow and when to use Base64, JSON formatting, hashing, JWTs, regex and cron — with free in-browser tools for each task.11 min read

Frequently asked questions

Is it safe to run on any SVG?

The default preset is conservative: it removes what does not affect rendering and merges what renders identically. Two things can change appearance and are worth checking in the preview: precision that is too low for very small artwork, and id removal when something references an id from outside the file. Keep the title if the SVG is an accessible icon.

Why is the gzipped saving smaller than the raw one?

Because gzip already removes most of the redundancy that whitespace and repeated attribute names create. Precision trimming and removing whole elements shrink both numbers; reformatting mostly shrinks the raw one. The gzipped figure is the honest one for anything served over HTTP.

The optimised icon looks different. What happened?

Usually precision: coordinates rounded to fewer places moved a point in a tiny drawing. Raise the decimal places. Less often a design-tool export relied on an id or a clip that SVGO merged; keep metadata and compare. The before and after previews are rendered from the actual markup, so a difference there is real.

Can I optimise many files at once?

Not here — this is one file at a time, with the previews and sizes that make a single decision informed. For a folder, SVGO's command line or its bundler plugins are the right tool, and the switches here map directly onto its configuration.

Is my file uploaded anywhere?

No. Everything runs locally in your browser using standard web APIs — your text, files and inputs are never uploaded to a server, so the tool works even offline once the page has loaded.

Is it free?

Completely. There is no sign-up, no account, no watermark and no usage limit. The tool is supported by unobtrusive ads, not by selling or processing your data.

Pro Tips

→Keep title and description on for icons that are inlined in HTML; strip them for icons used through an img tag, where they are never read out anyway.
→Remove width and height for anything placed in a responsive layout, and leave them on for a logo whose exact size is part of the brand.
→Turn on id prefixing before inlining several optimised SVGs on one page — two gradients called 'a' will otherwise share one.
→Three decimal places is enough for icons up to a few hundred pixels; go to five for technical drawings or anything with fine text converted to paths.
→Take the React export for a component library, and the SVG for everything else; the component is the SVG plus a rename, not a different asset.

Common Use Cases

•Cleaning icons exported from Figma or Illustrator before they go into a codebase.
•Shrinking a logo SVG that a design tool bloated to fifty kilobytes.
•Turning a batch of one-off illustrations into React components without hand-editing attributes.
•Checking what an SVG from an unknown source actually contains by comparing the input and output.
•Trimming coordinates on a map or diagram to cut its size without visible change.

How It Compares

SVGOMG is the web face of SVGO and exposes every plugin as a toggle, which is more control than most people want and exactly right for the few who do. Icon-library workflows such as SVGR do the React conversion as a build step. This tool sits between them: SVGO with the six decisions that matter surfaced in plain words, sizes raw and gzipped, both previews, and the React component from the same markup — without a build, and without the file leaving the tab.