1 · Add SVGs
Or paste SVG code
2 · Options
3 · Optimized
What SVG optimization removes
Design tools save far more than browsers need: editor settings, layer names, generator comments, unused gradients and coordinates to six decimal places. None of it changes how the graphic looks, but all of it is downloaded and parsed, and when you inline an SVG it’s repeated in every page’s HTML.
The optimizer runs SVGO, the tool behind most build pipelines, with settings that keep the output safe to use. It merges paths, shortens path data, collapses useless groups and rounds numbers. A typical export shrinks by 50–80%.
How much precision do you need?
Coordinates are rounded to the number of decimals you choose. Two decimals is invisible for nearly every icon and illustration, and icons on a 24 × 24 grid can often go to one. The preview compares the result pixel by pixel and warns you if rounding visibly changes the shapes.
Inline SVG, img or CSS?
Use <img src="logo.svg"> for illustrations: the file is cached and stays out of your HTML. Inline the SVG when you need to style or animate it with CSS, or color an icon with currentColor. Use a CSS data URI for small decorative backgrounds. For SVG, URL-encoding is usually 20–30% smaller than base64.
Questions
Are my files uploaded?
No. SVGO runs as JavaScript inside this page and previews are drawn from local copies. Scripts inside an SVG never run in the preview.
Why keep the viewBox?
Without a viewBox an SVG can’t scale. The optimizer always keeps it, even when width and height are removed.
Does the React component work with Next.js and Vite?
Yes. It’s a plain function component with attributes converted to React’s camelCase names, and it passes props such as className or aria-label through to the root element.