SVG Optimiser
Remove editor leftovers, round coordinates and shrink an SVG, with an option to make it inherit colour from CSS.
Strip editor metadata, round coordinates and shrink an SVG, with an option to make it inherit colour from CSS.
Result
no change
345 to 345 bytes
The preview inherits the site's accent colour, which only works because colours were set to currentColor. Check the shape still looks right after rounding: two decimal places is safe for an icon, but a large detailed illustration may need three.
Generating...About the svg optimiser
An SVG exported from a design tool carries a lot that never renders: editor namespaces, layer names, metadata blocks and coordinates written to fifteen decimal places. Rounding those coordinates is usually the single biggest saving.
Replacing hard coded colours with currentColor is the other change worth making. An icon that inherits colour can be themed from CSS and used on both light and dark backgrounds, instead of needing a separate file for each.
How to use it
- 1Paste the SVG source.
- 2Choose how many decimal places to keep.
- 3Turn on currentColor if this is an icon you want to theme.
- 4Check the shape still looks right, then copy the output.
Questions
How many decimal places should I keep?
Two is safe for icons. A large detailed illustration may need three. Compare the preview before and after, because rounding too hard distorts curves in ways that only show at size.
Why remove width and height?
With a viewBox in place, removing them lets the SVG scale to whatever container it sits in while keeping its aspect ratio. Keep them if you need a guaranteed intrinsic size.
What does currentColor do?
The shape takes the CSS color of its parent, so one file works in every theme and can be changed on hover. It is why icon sets ship this way.
Is my file uploaded?
No. It is parsed and rewritten entirely in your browser.