How to Optimize an SVG and Reduce Its File Size
On this page
Short answer: open Imgovo’s SVG Optimizer, add your SVG (up to 3 MB), keep Remove comments and editor data switched on, optionally round the numbers, and compare the preview with the original. Then download the SVG or copy its code. The file is processed in your browser and never uploaded.
Why SVG files get big
A simple logo is only a few lines of code. But drawing programs such as Inkscape, Sketch or Illustrator often add much more: comments, editor settings, empty groups, empty attributes, generous white space and coordinates with many decimals. None of this changes what you see, but it all has to be downloaded. On a website with many icons, that adds up. Smaller files also help your pages load faster; see How to optimize images for your website for the bigger picture.
What the optimizer does
- Removes comments and editor data.
- Removes empty groups and empty attributes.
- Removes unnecessary white space.
- Can round long numbers to 3, 2 or 1 decimals, or keep them as they are.
- Optionally keeps the title and description, which screen readers use.
- Keeps the viewBox, shapes, gradients, clip paths, masks and the ids that other parts of the file use.
Step by step
- Open the SVG Optimizer and drop an SVG file on the page, click to choose it, or paste it.
- Under Number precision, choose Keep numbers as they are, 3 decimals, 2 decimals or 1 decimal.
- Leave Remove comments and editor data on. Tick Keep title and description if the drawing is meaningful content that screen readers should announce.
- Look at the Result section. It shows the size before and after, and draws the original and the result side by side.
- Read the comparison line. Imgovo draws both at the same size and tells you how much they differ, pixel by pixel.
- Click Download SVG, or Copy SVG code to paste it into your page.
Should I round the numbers?
Start without rounding: it keeps the drawing the same and still removes the editor data. Then try 3 decimals, and 2 if the preview still looks right. Rounding saves more space, but it can change thin lines or tiny details slightly. If Imgovo reports a difference you can see, go back to a higher precision.
Change colors without opening an editor
Imgovo lists the solid colors written directly into shapes and styles. Choose a new color for any of them and every use of that exact color is replaced. This is handy for making one icon in several brand colors.
Gradients, colors set by style sheets and the word currentColor are left alone. The pixel comparison is skipped when you change colors, because the result is expected to differ.
Text in an SVG
Text is drawn with a font. If the viewer’s device does not have that font, another one is used and the drawing changes. Imgovo shows a warning when the file contains text. Converting text to outlines in your drawing program avoids the problem.
What is removed for safety
An SVG can contain scripts, embedded web pages, animations that can change links, links to other sites and event handlers. Imgovo removes these, and a notice under the file says how many items were taken out. This is a separate step from making the file smaller.
After optimizing
- To turn the SVG into a pixel picture, use the SVG Converter.
- To use it as a website icon, add it to the Favicon Generator, which can include a
favicon.svg. - Always keep your original file. You cannot get the editor data back from the optimized copy.
Privacy
The SVG is read and rewritten in your browser. Nothing is uploaded.
Try it now
Open the SVG Optimizer, add an SVG exported from your drawing program and see how much smaller it gets.
Frequently asked questions
What does the SVG optimizer change?
It removes comments and editor data (for example from Inkscape or Sketch), empty groups, empty attributes and unnecessary white space, and can round long numbers to 1, 2 or 3 decimals. It keeps the viewBox, shapes, gradients, clip paths, masks and the ids that other parts use.
Will my drawing look different afterwards?
Without rounding it should look the same. Imgovo draws the original and the result at the same size, compares them pixel by pixel and tells you how much they differ. Rounding to fewer decimals can change thin lines or tiny details slightly, so check the preview.
How much smaller will the file get?
It depends on the file. Drawings exported from editors often shrink a lot because of editor data; files that are already compact change very little. The result shows the real size before and after.
How does changing colors work?
Imgovo lists the solid colors that are written directly into shapes and styles. Pick a new color for any of them and every use of that exact color is replaced. Gradients, colors set by style sheets and the word currentColor are left alone.
What is removed for safety?
Scripts, embedded web pages, animations that can change links, links to other sites and event handlers are removed. The notice under the file says how many items were taken out. This is separate from making the file smaller.
Is my SVG uploaded?
No. The SVG is read and rewritten in your browser, and nothing leaves your device.