Skip to content

Compress SVG files

Remove editor clutter and shorten path data with SVGO, right in your browser.

Drop files here

or

Choose files

SVG · JPG · PNG · GIF · TIFF · WebP

Files never leave your device

Loading the compressor…

How to compress SVG files

  1. Add your files

    Drop files on the box, paste them or choose them from your device. Nothing is uploaded.

  2. Check the settings

    The default preset suits most files. Change quality, size or format if you need a smaller file.

  3. Download the result

    Save each file or all of them as one ZIP. If a file cannot get smaller, you keep the original.

SVG is code, not pixels

An SVG (Scalable Vector Graphics) file is a text document in XML that describes shapes: paths, circles, gradients, text. Because it contains instructions instead of pixels, it stays sharp at any size, from a 16-pixel favicon to a billboard. Icons, logos, illustrations, charts and maps on the web are often SVG, and the format has been a W3C standard since 2001.

Being text has a side effect: the file size depends on how verbosely the editor wrote it, not on how large the picture is shown. Two SVGs that render identically can differ in size several times over.

What makes SVG files heavier than necessary

  • Editor metadata. Illustrator, Inkscape, Figma and Sketch add their own namespaces, layer names, export comments and sometimes an embedded copy of the editable document.
  • Excess precision. Coordinates like 12.483920174 where 12.48 renders exactly the same at any realistic size.
  • Redundant structure. Empty groups, hidden layers, default attribute values, unused definitions and styles that could be shorter.
  • Long path syntax. Absolute commands where relative ones are shorter, repeated command letters, needless spaces.
  • Embedded bitmaps. A photo pasted into an illustration is stored as Base64 text inside the SVG, which is about a third larger than the original image file.

How the tool optimizes SVG

The tool runs SVGO, the widely used open-source SVG optimizer, in your browser. It removes metadata and comments, collapses useless groups, shortens path data, rounds numbers to 3 decimal places by default (you can choose 0 to 6) and merges styles, repeating the passes until nothing changes. The result is still a normal SVG that you can open in any editor or paste into HTML. In our tests on eight SVGs, from hand-optimized icons to an Inkscape export full of editor data, savings ranged from 8 % to 42 %.

Optimization is technically lossy in a narrow sense: rounding changes coordinates by tiny amounts, and editor-specific data is gone, so you cannot reopen the file with all its original layers. Keep the source file from your design tool and treat the optimized SVG as the published version.

Servers usually send SVG with gzip or Brotli compression, which shrinks the text again on the way to the browser. Optimization and server compression add up, because removed data never has to be compressed at all.

When an optimized SVG breaks

  • CSS or JavaScript no longer finds an element. Optimizers shorten or remove IDs and class names that look unused inside the file. If your page styles or scripts target them, check the result before publishing.
  • The icon no longer scales. An SVG needs its viewBox attribute to resize properly. The tool keeps it, so check whether the original had one; an SVG with only fixed width and height never scaled well.
  • Tiny shapes look distorted. Very small icons drawn on a large canvas can suffer from rounding. This is rare with the default precision.
  • The file is mostly an embedded photo. Export the photo as a separate JPG or WebP and link it, or convert the whole graphic to a bitmap.

SVG questions

Will the optimized SVG look different?

At normal sizes, no. Shapes, colors and text render the same. Use the before/after view to check details such as thin strokes if you are unsure.

Can I still edit the file afterwards?

Yes, any vector editor opens it. What is lost is editor-specific information such as layer names and artboards, so keep the original for future design work.

Should I convert SVG to PNG to make it smaller?

Usually not. A clean icon SVG is often only a few kilobytes and stays sharp on every screen. Convert to PNG only when the target does not accept SVG, as many email clients and some social networks do not.

Is it safe to optimize an SVG with animations?

SMIL and CSS animations inside the file are kept, but animations controlled by external scripts may depend on IDs. Test the optimized file in the page where it runs.

Related pages

Bitmap images are handled by the image compressor. For background on what runs locally and why, see how it works.