How to optimize an SVG
- Paste the code into SVG code, drop a file on the box, or click Load the sample SVG. The result appears at once.
- Under What to remove, leave ticked what you want gone. Pick a Number precision: High is the default.
- Read the line above Optimized code for the bytes saved, then compare the Original and Optimized drawings and the visual check.
- Click Copy code or Download .svg.
What the optimizer changes
The page parses your SVG with the browser's XML parser, edits the document tree and writes it back, so a broken tag gives an error instead of a broken file. It deletes comments (except license notices), metadata, Inkscape, Illustrator and Sketch data, empty attributes and groups, and values equal to the SVG default, such as stroke-width 1 (SVG 2 initial values). Properties like stroke-width are inherited, so a default stays when a parent sets that property.
It also shortens colors (#ff0000 becomes red, #aabbcc becomes #abc), collapses whitespace outside text, and rewrites path data, points and transforms without spare characters. High precision rounds coordinates so no point moves more than 0.005% of the viewBox size, and relative path commands are corrected as they go, so rounding errors do not add up.
Worked example
The sample is an Inkscape badge of 2,617 bytes (1,104 gzipped). With the defaults the status line reads Original: 2,617 bytes. Optimized: 916 bytes. Saved 1,701 bytes (65.0% smaller), and the gzipped size falls to 484. The star path m 60.000000,18.000000 l 3.703047,9.903193 becomes m60 18l3.7 9.9, because the viewBox is 120 wide and High keeps two decimals. The visual check reports that both drawings match pixel for pixel.
Limits and edge cases
- <title>, <desc> and IDs stay unless you tick their boxes. Remove IDs only from standalone files, because your CSS or JavaScript may use them.
- Shapes are not converted to paths, paths are not merged and curves are not simplified. Use SVGO in a build step for that.
- A tiny SVG can grow when the tool adds the xmlns attribute that a standalone file needs.
- Invalid SVG, such as an unclosed tag or , shows the line and column of the error.
- Scripts inside the SVG are kept as written but never run here, since the previews draw it as an image. Files up to 5 MB work.
- To read the result as indented markup use the XML formatter. For the CSS in a stylesheet use the CSS minifier, and for photos use the image compressor.
SVG optimizer FAQ
How do I reduce the size of an SVG file?
Paste the SVG or drop the file, leave the default options ticked, then copy the result or download it. Files exported from Inkscape, Illustrator or Sketch often lose half their bytes. Hand-written icons are already compact and shrink very little.
Will optimizing change how my SVG looks?
Not at High precision, which moves shapes by less than 0.005 percent of the picture size. The page draws the original and the result side by side and compares them pixel by pixel. Choose Lossless to keep every digit.
Why did my optimized SVG get bigger?
A very small SVG can grow when the tool adds a missing xmlns attribute, which a standalone file needs. Files with no comments, metadata or editor data have little to remove.
Should I remove title and desc from an SVG?
Keep them for any image that carries meaning, because screen readers read them. Remove them only for decorative images. The tool keeps them by default, and the Remove title and desc box deletes them.
How is this different from SVGO?
SVGO runs in Node, can merge paths and turn shapes into paths, and has a plugin system. This tool runs in your browser, changes no shapes and checks its own result by drawing both versions. Use SVGO in a build step when you need the smallest possible file.
Sources: W3C, SVG 2 painting properties; SVGO preset-default plugins.