Home › File & PDF Tools › SVG Compressor

SVG Compressor

Our free SVG compressor shrinks an SVG file right in your browser, without changing how it looks. Paste your SVG or upload a .svg file, and the tool strips out comments, metadata, and extra whitespace, shortens long decimal numbers, and drops empty groups — then shows you the before and after sizes and the percentage saved, with a copy or download of the smaller file. No upload, no sign-up, and no watermark.

How it works

An SVG file is text, not pixels: it describes a picture with tags such as <circle>, <rect>, and <path>, plus numbers for positions, sizes, and colours. That is why an SVG stays sharp at any size, and why it is the usual format for logos and icons on the web. It is also why SVG files from a drawing app are often far bigger than they need to be. The app writes out editor notes, export details, long decimal numbers, and empty groups that do nothing — all of which a browser ignores when it draws the picture, but all of which still travel over the network on every page load.

The compressor removes exactly that dead weight, and nothing else. Comments — the <!-- ... --> notes editors leave behind — are stripped first, because no browser ever shows them. The <metadata> block, which holds the editor name, export settings, and other bookkeeping, goes next. The title and description are optional: they help screen readers and search engines understand the image, so they are on by default in the "keep" sense only when you uncheck the box — the tool removes them only when you tick the option, and you should keep them on logos and illustrations that carry meaning. Empty groups — <g> elements that contain nothing at all — are dropped, since a group with no shapes draws nothing.

Then the numbers are shortened. A drawing app often writes a coordinate as 60.000000, with six decimals, when 60 would draw the same pixel. Precision sets how many decimals survive: 2 decimals is the recommended middle ground and suits most icons and logos, 3 keeps fine detail for detailed illustrations, 1 suits simple shapes, and 0 is the smallest file but can make a detailed icon look slightly rough, because every coordinate snaps to a whole number. Trailing zeros are dropped too, so 120.00 becomes 120 and 60.50 stays 60.5 — the value never changes, only the spelling gets shorter.

Finally the whitespace is tidied. Line breaks and indentation between tags are removed, since they exist for people reading the file, not for the browser, and repeated spaces inside tags collapse to one. The result is a single compact line of SVG that a browser reads exactly the same way. What the compressor never does is just as important: it never moves a shape, never changes a colour, never drops a visible element, and never rewrites a path. A compressed icon renders identically to the original — the preview under the output lets you check that with your own eyes before you download it.

Everything happens in your browser, so your SVG is never uploaded, and the tool works offline once the page has loaded. Paste the SVG or upload a .svg file, pick your options, and the tool reports the size before and after in bytes, the bytes saved, and the percentage — the same numbers the bars beside the tool show. Copy the result to paste it into your page, or download it as a .svg file, named after the file you uploaded or compressed.svg by default. On a site with dozens of icons, the savings add up: a saving like that on every icon is a noticeably faster page, with no visible difference at all.

Worked example

Suppose you export a simple blue circle icon from a drawing app and get this SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="120.000" height="120.000" viewBox="0 0 120.000 120.000"> <!-- A blue circle icon --> <metadata>Exported by an editor</metadata> <title>Blue circle</title> <desc>A simple blue circle icon</desc> <g></g> <circle cx="60.000" cy="60.000" r="50.000" fill="#2563EB" /> </svg>

Step 1: paste it into the box, with the precision on 2 decimals and all four removal options ticked.
Step 2: click Compress SVG. The tool checks the input starts with an <svg> element, then strips the comment, the metadata, the title and description, and the empty group, rounds the numbers, and collapses the whitespace.
Step 3: the output is exactly this:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle cx="60" cy="60" r="50" fill="#2563EB"/></svg>

The page reports the sizes: 328 bytes before and 140 bytes after — 188 bytes saved, 57% smaller — and the preview shows the same blue circle as the original. Now try the precision control. Switch to 0 decimals and compress the same file: the numbers are already whole, so the output is unchanged. Paste a coordinate with more decimals, such as cx="60.456", and at 2 decimals it becomes cx="60.46", while at 0 decimals it becomes cx="60" — the same circle, drawn a fraction of a pixel differently, in a smaller file.

If you paste something that is not an SVG — a JPG, a PNG, or an HTML page — the tool does not guess. It shows a message like "That does not look like an SVG file. It should start with <svg ...>," so you can paste the right file and compress again.

FAQ