SVG optimizer, smaller files, same picture.

An SVG optimizer makes an SVG file smaller by removing what a browser never draws and writing the rest in fewer characters. This one runs SVGO, an open source SVG optimizer, version 4.1.0, inside your browser. Safe mode only removes things that do not draw, so the picture stays identical. Stronger mode runs SVGO's full default set. Either way a pixel check draws both versions and tells you if anything moved.

How to optimize an SVG

1. Drop SVG files on the box, click it to choose files, or copy SVG code and press Ctrl or Cmd V. You can also open Or type or paste SVG code, paste the code and press Optimize this code.
2. Under Settings, pick Safe or Stronger. Start with Safe.
3. Read the size at the top of the side column. Drag the line over the picture to compare, and read the pixel check under it.
4. Look at What was taken out and What each step saved to see where the bytes went.
5. Press Download the SVG. With several files, use Download all as a ZIP. Copy SVG code puts the optimized code on the clipboard, and Add more files adds to the list.

Safe or Stronger

Safe removes the doctype, the XML line, comments, the metadata block, editor data from Inkscape, Sketch and Illustrator, unused namespaces, empty groups and empty attributes. It writes colours and path data shorter and keeps numbers to 8 decimal places, far finer than any screen can show. It keeps ids, classes, shapes and groups as they are. Stronger is SVGO's full default set: it also turns shapes into paths, joins paths, merges groups, moves styles onto elements, drops attributes that only repeat a default and rounds numbers to the places you choose, from 0 to 6. Three places is the default.

These six test files were made for this page and checked in this tool. Your files will differ, but the pattern is typical: editor exports shrink most.

On the Inkscape-style logo, Safe went from 3,412 to 1,820 bytes, which is 46.7% smaller: 1,592 bytes saved. The steps list shows where it came from: the editor data alone was 768 bytes, the metadata block 198 bytes, spaces and line breaks 174 bytes and shorter numbers 106 bytes. In the pixel check, all six files came out identical in Safe. In Stronger, four were identical. The Illustrator-style file had 1,366 of 699,392 pixels that differed by 1 out of 255, and the chart had 1,641 of 655,360 pixels that differed by at most 13 out of 255, tiny shifts along the edges of shapes that the page reports each time.

Ids, titles and styles

Keep ids as they are is on by default, because CSS or JavaScript outside the file may point to an id, and shortening it would break that link. If nothing outside the file uses them, turn it off in Stronger: on the logo that took the result from 1,587 to 1,319 bytes. Keep title and description is also on by default, since screen readers read them. Turn it off only for a purely decorative picture.

If you place the SVG inline in a web page, its style rules can affect the rest of the page, and the page's CSS can reach into it. Check the result in the page itself before you replace the old file.

What it does not do

• A picture embedded in the SVG as base64, such as a PNG, stays as it is. Compress that picture first with the PNG compressor.
• Text stays text, so the viewer still needs the font. Convert text to outlines in your editor first if the font may be missing.
• The file is not zipped. Many servers send SVG compressed with gzip or Brotli on top of what this does.
• A file that cannot get smaller is returned as it was. The tool never gives you a bigger file.

Common problems

If the pixel check shows a difference you can see, switch to Safe, or keep ids and keep the decimal places at 3 or more. If the browser cannot draw a file, it is probably not valid SVG. Files over 20 MB are skipped. To turn a picture into SVG first, use image to SVG, and to turn an SVG into a PNG use SVG to PNG.