SVG Optimizer & Converter
Shrink an SVG and export it as a React component, a data URI, or a CSS background — entirely in your browser.
Preview
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The SVG Optimizer runs SVGO in your browser to strip the weight that design tools leave behind — editor metadata, comments, the XML prolog, unused ids and definitions, and excess decimal precision on path data. Exports from Figma, Illustrator, and Sketch routinely shrink by half or more, and the byte saving is reported so you can see exactly what you gained.
The same optimized markup can be exported three other ways: as a React component with every attribute converted to JSX form, as a data URI, or as a ready-to-paste CSS background-image. For data URIs the default is URL encoding rather than Base64, because SVG is text — Base64 inflates it by roughly a third, while URL encoding stays smaller and readable. The # in hex colours is encoded too, which is the usual reason a hand-made SVG data URI breaks inside url().
FAQ
Editor metadata, comments, the XML prolog, unused definitions and ids, and redundant precision on path coordinates. Shapes are also converted to paths where that is smaller. Script elements are stripped too, since they have no place in an icon.
Usually not. Dropping viewBox makes an SVG stop scaling responsively, which is why it is off by default here even though it produces a smaller file. Only remove it for a fixed-size icon you will never scale.
URL encoding, in almost every case. SVG is text, so Base64 inflates it by about a third, while URL encoding stays smaller and readable. Base64 is only worth it if a toolchain mangles the percent-encoded form.
Almost always an unencoded # from a hex colour, which CSS reads as the start of a fragment. This tool encodes # along with the other characters that break url(), so the output is safe to paste directly.
Switch to "React component" and it emits a named component with all attributes converted to JSX form — stroke-width becomes strokeWidth and so on. Set the component name in the field provided, and toggle TypeScript for a typed signature.
No. Optimization and conversion run entirely in your browser. The preview is rendered through an image data URI, so even an SVG containing a script cannot execute on this page.