How to use the svg optimizer
- Paste your SVG code into the box, choose an SVG file, or press Use a sample.
- Choose the decimal places to keep, and whether to keep the title and description, remove unused ids and remove comments.
- Read the Optimized SVG, the sizes before and after, the list of what was removed, and the before and after pictures with a difference figure.
- If the two pictures match, press Copy SVG or Download .svg. If they differ, raise the decimal places and look again.
What changes in a typical export
Editors write numbers such as 100.00000px and 10.12345 and add comments, metadata and their own namespaces. The optimizer turns 100.00000px into 100px and, with 3 decimals, 10.12345 into 10.123 and 0.5 into .5. A path written as M 10.123456,20.5 L 30.000,40.25 C 0.5,0.5 -0.25,10 5,5 Z becomes M10.123 20.5L30 40.25C.5.5-.25 10 5 5Z, which draws the same shape in fewer characters.
Elements and attributes from editors such as Inkscape or Sketch, the XML declaration, unused ids, empty groups and groups with no attributes also go. The ids that gradients, patterns, use elements, style rules and accessibility labels point to are kept.
Safe by design
An SVG file is code, and it can carry scripts, event handlers that run when someone clicks, embedded web pages and links that load files from other sites. The optimizer removes script and foreignObject elements, every attribute that starts with on, links that do not point inside the file or at a small inline picture, and style rules that load outside files. Animations that try to change a link are removed too, while animations of colors and sizes stay.
The file is read by a strict XML reader, not by the browser, and it never expands entities that the file defines for itself. A file with a DTD is refused. The pictures in the page are drawn as images, which cannot run script. Even so, only use SVG files from sources you trust, and check the result.
Limits of optimizing
The changes are cautious on purpose. Paths with arc commands keep their numbers because arc flags can be written without spaces. Transforms and style values keep their numbers, apart from extra spaces. Shapes are never merged or simplified. For larger savings you may need an editor that simplifies the drawing itself. After optimizing, you can turn the result into a bitmap with SVG to PNG, build icons with the favicon generator, format other XML with the XML formatter, or convert picture types with the image converter.
Assumptions and limits
- SVG files up to 5 MB and 5 million characters are accepted.
- Rounding is half away from zero. Fewer decimals make shapes less exact, so check the before and after pictures.
- The difference figure compares the two pictures drawn small. It is a quick check, not a guarantee, and it is not available if your browser blocks reading the pixels.
- SVG files that depend on script to draw anything will be blank or incomplete after the script is removed.
Frequently asked questions
How do I make an SVG file smaller?
Paste the code or choose the file. The tool removes editor data, comments and unused ids, rounds the numbers and writes the code without extra spaces. The sizes before and after are shown.
Why remove scripts from an SVG?
SVG can contain script and event handlers that run in some contexts. Removing them, along with links to outside files, makes the picture safe to display on a page you control.
Will optimizing change how my SVG looks?
It should not, but rounding numbers can move shapes by a tiny amount. The tool draws the file before and after and shows a difference figure so you can check.
Is my SVG uploaded anywhere?
No. It is read and rewritten in your browser, and the preview pictures are made from local data that stays on your device.