SVG optimizer
Lighter SVG files
Original SVG
Options
Keeping viewBox lets you resize the image with CSS; <title> is the text alternative read by screen readers.
Optimized SVG
Import or paste an SVG to optimize it.
Everything happens in your browser: the file is never uploaded. The preview is shown as an image, so no script in the SVG runs.
About this tool
This tool shrinks SVG files exported from Figma, Illustrator or Inkscape. It runs svgo with its default preset, which strips metadata, comments and redundant attributes and simplifies paths. You import a file of up to 5 MB or paste the markup, then compare the size before and after, the percentage saved and the two previews side by side.
A few options control the output: multiple passes, a precision of 0 to 8 decimals, removing viewBox, width and height or the title element, and keeping IDs. The optimized SVG can be copied or downloaded as a .min.svg file. The tool can also turn it into a React component, in JSX or TypeScript, with the component name you choose and props passed through to the svg element.
How to use it
- Click "Import an SVG file" or paste your markup into "Or paste the SVG code".
- Adjust the "Options": "Multiple passes", "Precision (decimals)", "Remove viewBox", "Keep IDs (id)" and so on.
- Check the "Before" and "After" sizes, the "Saving" and the two previews.
- Click "Copy" or "Download" to get the optimized SVG.
- For React, enter a "Component name", toggle "TypeScript (typed props)", then click "Copy component".
Frequently asked questions
Is my SVG uploaded to a server?
No. svgo is loaded into the page, and both the optimization and the React conversion run in your browser. The file is never uploaded, and the preview is rendered as an image, so no script inside the SVG gets executed.
Should I remove the viewBox attribute?
Usually not. viewBox is what lets the image scale with CSS while keeping its proportions, which is why the option is off by default. Removing width and height is often more useful for an icon whose size you set in CSS.
What precision should I pick?
Precision sets how many decimals are kept in paths and transforms, from 0 to 8, with 3 as the default. A lower value saves more bytes but can distort small details, so compare the two previews before downloading.
How does the React component conversion work?
Attributes are renamed for JSX (class becomes className, stroke-width becomes strokeWidth), inline styles become objects, and script elements and event handler attributes are dropped. The component's props are spread onto the svg element.