Paste SVG code or open an .svg file and get a smaller file that draws the same picture. Exported SVGs carry a lot that browsers never use: comments, editor settings (Inkscape's named view, Illustrator and Sketch data), metadata blocks, numbers with six decimals, attributes set to their default values and IDs nothing points to. The optimiser removes them, rounds numbers to the precision you choose and shortens path data, then draws both versions in your browser and compares them pixel by pixel, so you know the result is safe before you use it. It shows the size before and after, raw and gzipped, and lists what it changed. Everything runs on this page.
Safe by design
Most broken optimised SVGs come from a handful of "optimisations" that are only usually safe. This tool applies each step only when the file gives it no way to matter:
- Default attributes such as
fill="black" are removed only when no parent sets that property, there is no <style> block that could, and the element is not inside <defs> or a <symbol>: a <use> passes its own fill to what it shows, so a "default" fill there is doing real work. - IDs are removed only when nothing refers to them: not an
href, not url(#…) in an attribute, a style or CSS, not a selector in a <style> block, not an animation's begin, not an ARIA attribute. Files with a <script> keep every ID, and <symbol> IDs always stay, because sprite sheets are used from outside the file. If your page's CSS or JavaScript targets IDs inside the SVG, turn the option off. - Whitespace is removed between tags but never inside
<text>, <tspan>, <title>, <style> or anything marked xml:space="preserve". - Numbers are rounded with drift correction: on a long path of relative steps, each step is written as the difference from where the rounded path already is, so errors cannot add up.
viewBox and the root size are never rounded. - Converting shapes to paths is off by default: it rarely saves much, and CSS that selects
rect or circle would stop matching.
The article on optimising SVGs safely explains each of these with an example that breaks.
Choosing the precision
Three decimals suit icons drawn on a 24 or 48 unit grid: a thousandth of a unit is far below a pixel at any normal size. Large illustrations with a viewBox of several thousand units can use one or two decimals. Keep four or more for tiny viewBoxes (0 to 1) or drawings that will be scaled up a lot.
To turn an SVG into PNG or JPG, or a picture into a favicon, use the SVG converter and the favicon generator. To check how much gzip saves on any text, the code minifier shows the same numbers for HTML, CSS and JavaScript.
