imbuz
Contact All tools

SVG optimizer

Developer tools

Smaller SVGs, ready to paste

SVGO runs right here. Drop SVGs, see the saving, and copy the result as SVG, a React component or a CSS background.

Drop SVG files or browseOne or many .svg files — optimised in your browser, nothing uploaded

About this tool

SVGO, without the command line

Design tools export SVGs full of editor metadata, hidden layers, long decimals and redundant groups. This runs SVGO — the optimiser every build pipeline uses — in your browser with safe defaults: it keeps the viewBox so the icon still scales, keeps IDs that something references, and never changes how the graphic looks. Then it gives you the result in the form you are actually going to paste: an .svg file, a React/JSX component with camelCased attributes, or a URL-encoded data URI for CSS.

  • Free, no sign-up
  • Runs in your browser
  • Nothing uploaded

The real SVGO

SVGO 4 with its preset-default plugins, plus precision control. The same tool your bundler would run, so the output is predictable.

Three outputs

Optimised SVG, a React component (class → className, stroke-width → strokeWidth, props spread on the root) or a data URI for background-image.

Checked before you copy

Each file is re-parsed after optimising, and the before/after preview is side by side so you can see nothing moved.

Step by step

How to optimise an SVG

  1. Add your SVGs

    Drop one or many .svg files, or paste SVG code. They are read in your browser.

  2. Pick the output

    SVG for a file, JSX for React, or data URI for CSS. Adjust decimal precision if you need it tighter.

  3. Copy or download

    Copy the code for one file or download every optimised SVG as a ZIP.

Get the most out of it

Tips for the best results

  • Keep the viewBoxIt is what lets an icon scale with CSS. This tool never removes it.
  • Two decimal places is plentyFor icons drawn on a 24 px grid, precision 2 is invisible and noticeably smaller.
  • Inline small iconsUnder about 2 KB, a data URI in CSS saves a request; above that, a file caches better.
  • Use currentColorReplace fixed fills with currentColor and the icon takes the text colour around it.

Keep going

More free developer tools

See every developer tool →
Favicon GeneratorICO, PNG sizes, manifest and head tags Responsive Image Generatorsrcset in AVIF, WebP and JPEG + <picture> Image to Base64Data URI, CSS, HTML and Base64 → image GIF to MP4 / WebMSwap heavy GIFs for tiny video Video to GIF / WebPClip a video into an animated GIF or WebP Video Frame ExtractorPoster frames and stills from any video Audio CompressorMP3, AAC or Opus at the bitrate you pick Image CompressorAVIF, WebP, JPEG — measured before you save Image ResizerExact pixels, a percentage, or a preset

Questions

Questions about this tool

Everything here runs in your browser — nothing you add is uploaded. More in the general FAQ.

Does optimising change how my SVG looks?

It should not. The default settings only remove what does not render — editor metadata, comments, empty groups, redundant attributes — and round coordinates to the precision you choose. The preview shows the original and optimised versions side by side so you can check.

How do I convert an SVG to a React component?

Choose the JSX output. Attributes are converted to their React names (class to className, stroke-width to strokeWidth, xlink:href to xlinkHref), inline styles become objects, and the root svg spreads {...props} so you can pass a className or size.

How do I use an SVG as a CSS background?

Choose the data URI output and paste it into background-image: url("…"). It is URL-encoded rather than Base64, which is about a third smaller for SVG.

What is SVGO?

SVGO is the open-source SVG optimiser used by most build tools and image pipelines. This page runs the same library in your browser.

Are my SVG files uploaded?

No. SVGO runs in your browser and the files never leave your device.