SVG optimiser
Minify SVG files in the browser and see the saving.
FreeRuns in your browserNo signupUpdated 2026-10-29
Runs SVGO in your browser with preset-default. Nothing leaves your machine.
Before
609 B
After
285 B
Saved
53%
324 B smaller
Preview
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>Icon / Check</title><g fill="none" fill-rule="evenodd"><circle cx="24" cy="24" r="24" fill="#2f6bff"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m14 25 7 7 13-15"/></g></svg>
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This svg optimizer runs SVGO, the same library most build tools use, directly in your browser. It strips what design tools leave behind, such as editor metadata, comments, unused ids, default attribute values and excess decimal places, and rewrites shapes as shorter paths. You see the size before and after, a preview to confirm nothing changed visually, and the optimised markup ready to copy or download. The file never leaves your computer.
How to use it
- Choose an SVG file, or paste the markup into the box.
- Leave Keep viewBox on for icons that need to scale. Turn on Keep id attributes if CSS or JavaScript targets elements by id.
- Lower the decimal places for a smaller file, then check the preview for distortion.
- Copy the result or download it as a file.
How to read the result
The sample is a 48px check icon as a design tool might export it: an XML declaration, a comment, ids on every element, and coordinates written as 24.000000. It is 609 bytes. After optimisation it is 285 bytes, a 53% saving, and the preview looks identical.
Where did the 324 bytes go? The declaration, the comment, the unused xlink namespace and the version attribute are gone. The ids were removed because nothing refers to them. 24.000000 became 24, and #FFFFFF became #fff. Attributes that repeat a default, such as stroke="none" on the group, were dropped. The polyline was rewritten as a shorter path. Width and height were removed because the viewBox already defines the shape, which lets CSS size the icon freely. The title stays, because screen readers use it.
Savings depend on the source. A file straight from a design tool usually has plenty to remove; a file that was already optimised may shrink by only a few bytes. SVGs with embedded raster images save little, because the bulk is data the optimiser cannot touch.
If a gradient vanishes or a shape moves, turn on Keep id attributes or raise the decimal places.
To use the optimised file as a CSS background, encode it with the SVG to data URI converter. For a full performance pass on your site, see website design and development.
Questions
Frequently asked.
Will optimising change how my SVG looks?
With the default settings it should not. SVGO only removes data that does not affect rendering and rewrites numbers in a shorter form. Problems show up when decimal places are set too low on detailed curves, or when ids that a stylesheet or script depends on are renamed. Check the preview after every change.
Should I keep the viewBox?
Yes, for almost every web use. The viewBox defines the coordinate system, so without it the SVG cannot scale to a different size with CSS. Removing width and height while keeping the viewBox is usually the better trade, because the icon then takes whatever size its container gives it.
More in Design & CSS
Related tools.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide