SVG Optimizer
Shrink SVG files with SVGO and export them as React or Vue components or a CSS mask.
- Never uploaded
- Works offline
- Free, no sign-up
Processed on this device. Nothing is sent to a server.
How to use the SVG Optimizer
- Step 1Paste or open an SVGFrom Figma, Illustrator, Inkscape or an icon set.
- Step 2Compare before and afterCheck the preview and the size saved.
- Step 3ExportMinified SVG, a React (JSX or TSX) or Vue component, or a CSS mask.
What the optimizer removes
Design tools add a lot that browsers don’t need: XML declarations, editor metadata, comments, hidden layers, empty groups, default attribute values and coordinates with six decimal places. SVGO removes all of it and rewrites paths in their shortest form, often cutting the file in half without changing how it looks.
The viewBox and the title are kept, so icons still scale and screen readers can still announce them. If you place several SVGs on one page, turn on “Prefix IDs” so gradients and clip paths from different icons don’t clash.
The CSS mask export lets you recolor a single-color icon with plain CSS: the shape comes from the SVG and the color from background-color, so it follows currentColor like text.
Questions
Are my SVG files uploaded?
No. SVGO runs inside your browser tab. Files you open are read on your device, and the preview is drawn locally. Nothing is sent to a server.
Will optimizing change how my SVG looks?
Normally no. Compare the two previews side by side. If curves look slightly off, raise the precision to 4 or 5 decimals.
How do I use the React component?
Save it as a .jsx or .tsx file and import it like any component. Props are passed to the root <svg>, so className, width, height and aria-label work as expected.
Is it safe to preview an SVG I downloaded?
Yes. Previews are shown as images, which never run scripts that may be embedded in an SVG file.