SVG Input
Optimized SVG
Before
After
Run SVGO over an SVG in your browser. An icon copied out of Figma or Illustrator typically loses 50 to 80% of its bytes, mostly editor metadata and coordinates with seven decimal places that no screen can show. SVGO loads on demand the first time you optimize, and the file never leaves the tab.
title, desc, the Sketch and Illustrator namespaces and generator comments. A production icon renders the same without them.
Wrapper groups with no attributes, empty defs, elements that are never rendered. Design tools nest groups deeply, and the rendered output rarely needs that nesting.
17.1045695 becomes 17.1. Coordinates from a design tool carry seven decimals of accuracy that no screen can show.
Exports often write out stroke-width and fill-rule with their default values. Removing them saves bytes and changes nothing on screen.
Remove IDs is on by default because a design export is full of ids that nothing in the file references, and they are often the largest single saving. However, if your SVG is animated with SMIL, styled from an external stylesheet, or manipulated by JavaScript, those ids are how the code finds the elements. Removing them breaks the animation or script without any error. Turn it off for anything interactive.
Remove width/height is off by default. Dropping the two attributes and keeping only the viewBox makes the SVG scale to its container, which is usually what you want for an inline icon. However, an SVG in an img tag with no CSS then renders at a default size instead of its intended one.
Fewer decimals means a smaller file and slightly less accurate curves. At icon sizes, two decimals is invisible and one is usually fine. On a large detailed illustration, going below two shows up as paths drifting and corners that no longer meet. Compare the before and after preview above each time you lower the Precision value.
npx svgo icon.svg -o icon.min.svg
# A whole folder, in place
npx svgo -f ./icons --recursive
# With a config file so the settings are in git
npx svgo --config svgo.config.js -f ./iconsmodule.exports = {
multipass: true,
plugins: [
{
name: "preset-default",
params: {
overrides: {
// removing the viewBox breaks scaling; almost never what you want
removeViewBox: false,
// keep ids if anything targets them from CSS or JS
cleanupIds: false,
},
},
},
{ name: "removeDimensions" }, // keep viewBox, drop width/height
{ name: "convertPathData", params: { floatPrecision: 2 } },
{ name: "sortAttrs" }, // better gzip ratios across a set
],
};removeViewBox is enabled in preset-default in SVGO 3 and is the most common cause of an icon that stops scaling. Override it to false.
// Vite
// npm i -D vite-plugin-svgo
import svgo from "vite-plugin-svgo";
export default { plugins: [svgo()] };
// Or at import time with SVGR for React
// npm i -D @svgr/webpack
// { test: /\.svg$/, use: ["@svgr/webpack"] }
// SVGR runs SVGO internally and takes the same config.The savings on a design-tool export come mostly from things that were never needed: the title and desc the tool inserts, its own namespace declarations, wrapper groups with no attributes, and coordinates carrying seven decimal places of precision that no display can resolve. It is normal for a Figma icon to lose three quarters of its bytes without a pixel changing.
This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.
Editor metadata, comments, empty groups, unused definitions and hidden elements. It also rounds coordinates, shortens colors and collapses transforms. An icon exported from Figma or Illustrator commonly drops by 50 to 80% with no visible change.
Yes, the official browser build of SVGO 3, the same optimizer that runs in most build pipelines. The page loads it the first time you click Optimize.
It can, so watch one setting. Remove IDs deletes or renames ids, which breaks CSS or JavaScript that targets them and SMIL animations that reference them. Turn off Remove IDs when the SVG is scripted or animated.
Fewer decimal places means a smaller file and slightly less accurate curves. Two or three decimals is invisible at icon sizes; go lower on a large detailed illustration and the paths start to drift.
Yes, that is the main use. Use Copy as SVG in Figma, paste it here and click Optimize. The result is usually a fraction of the size and much easier to read.
For raster images, the image converter handles PNG, JPEG and WebP. An SVG is XML underneath, so the XML formatter can pretty-print one, and the favicon generator takes an SVG as its source.