↑↓ to move · Enter to open · Esc to close

SVG Minifier

Minify SVG code for production: every safe optimization, the shortest ids, sorted attributes, and no whitespace. Paste the code or drop a file and get the smallest version that draws the same.

Updated
Runs in your browser. Your SVG is not uploaded.

Your SVG

Settings

Runs as you type for files up to 100 KB.

Minified SVG

Your minified svg will appear here
  1. Paste SVG code, upload a file, or load a URL
  2. Pick the settings
  3. Copy or download the result

How to use the SVG Minifier

  1. Paste the SVG code or drop the file on the text box.
  2. Keep Decimal places at 2 for icons, or raise it for detailed drawings and maps.
  3. Check that the two previews match.
  4. Copy the one-line result or download it.

How it works

The minifier runs SVGO with the default safe plugins and always uses multiple passes. On top of the optimizer's work it:

  • writes everything on one line with no indentation;
  • renames ids to the shortest free names (sky becomes a) and updates every reference to them;
  • sorts attributes into a fixed order, which lets gzip and Brotli find more repeats when the file is served;
  • uses 2 decimal places by default instead of 3.

Nothing that changes the drawing is turned on: the viewBox, title, and shape order stay.

Examples

  • The 2,089 byte sample icon minifies to 665 bytes on a single line, 68% smaller.
  • Its gradient id sky becomes a, and fill:url(#sky) becomes fill:url(#a).
  • <rect width="64.000000" x="0.000000"> loses the zeros and the default x: <rect width="64">.

Minify, then compress

Minifying removes characters. Gzip or Brotli on your web server then compresses what is left, and the two savings add up. For SVG placed inline in HTML or in a CSS url(), minifying is the only saving you get, so it matters even more.

Limitations

  • The one-line output is hard to read. Use the SVG Formatter to indent it again.
  • Renamed ids break CSS or JavaScript outside the file that refers to the old names.
  • Files up to 5 MB.

Frequently asked questions

What is the difference between minifying and optimizing an SVG?

Optimizing makes the code shorter while it can stay readable. Minifying goes further: one line, shortest ids, and sorted attributes, for files that only a browser will read.

Is a minified SVG still valid?

Yes. It is the same SVG with less text. Browsers, design apps, and the SVG Validator read it normally.

Can I undo minification?

Formatting can be restored with the SVG Formatter, but removed comments, editor data, and original id names are gone. Keep the source file.

Should I minify SVGs used inline in HTML?

Yes. Inline SVG is part of the page, so every byte you remove makes the HTML smaller.

Often used together with the SVG Minifier.

  • SVG Optimizer

    Shrinks SVG files with SVGO and shows the before and after side by side.

  • SVG Formatter

    Indents SVG code for reading and editing without changing any values.

  • CSS MinifierDeveloper Tools

    Minifies CSS and shows the size saving, raw and gzipped.