SVG Optimizer

Paste SVG markup or drop an .svg file and get a smaller, cleaner version — removing comments, editor metadata, redundant whitespace, excess decimal precision and unused definitions. Nothing is uploaded: the file is parsed and rewritten in your browser. For raster images use the image compressor or image resizer instead.

What it does

SVG is a text format, which is both its strength and the reason exported files are so large. A drawing application writes the artwork you see and a great deal you do not: comments left by the designer, private namespaces such as inkscape: and sodipodi:, metadata blocks, unused definitions, and coordinates carried to six or more decimal places when two would be invisible on any screen. Every one of those characters is shipped to each visitor on every page load, and unlike a bitmap an SVG is not compressed by the drawing tool before it is saved.

This optimiser parses the markup into a document, applies a set of the safest transformations, and serialises it back to text. The result is a file that renders identically in a conforming viewer but weighs less. Because the work happens in the browser, it is quick and private: there is no upload, no account and no queue, and the same JavaScript that rendered this page performs the optimisation.

How to use it

Paste your SVG into the input box, or drop a file onto it, then choose which optimisations to apply and press Optimize. In detail:

1. Paste the SVG source into the input box, or drop an .svg file onto it. The file is read locally; nothing is sent anywhere.
2. Tick the optimisations you want. All six are on by default, and each is independent, so you can switch off anything you would rather not change.
3. Press Optimize. The live preview renders the optimised SVG, and the size before and after are shown in bytes.
4. Check the preview. If anything looks wrong, turn off the optimisation that caused it and optimise again.
5. Copy the output into your project, or save it as an .svg file.

The preview is the important step. Optimisation is safe by construction for the transformations used here, but a file that is already hand-tuned, or that relies on an unusual feature, deserves a glance before you commit the new version.

What it cleans up

• Comments — <!-- ... --> blocks are removed, including the designer notes and section markers that drawing tools leave behind.
• Metadata and editor namespaces — <metadata> blocks, and attributes from private namespaces such as inkscape:, sodipodi:, sketch:, figma: and adobe:, which mean nothing to a browser.
• Whitespace — indentation, blank lines and whitespace-only text nodes between elements are collapsed, which is where heavily formatted files lose the most characters.
• Number precision — coordinates in path data and similar attributes are rounded and stripped of leading zeros, so 0.500000 becomes .5.
• Colours — six-digit hex colours that fit in three digits are shortened, and default colour values are dropped where the specification lets them be omitted.
• Empty and unused definitions — empty <defs> and <g> elements are removed, and definitions whose id is never referenced are dropped.

Why SVG file size matters

SVG is usually served uncompressed, and because it is markup it is delivered on every request rather than cached as a binary is. For a single logo the saving is trivial; across an icon set of a few hundred files, or a charting library that emits an SVG per data point, it adds up to real bytes over a real network. Smaller SVG also parses faster, which matters on low-powered phones, and it is easier to read and review in a diff once the machine-generated noise is gone. If your image is a photograph or a complex raster illustration rather than vector artwork, a raster tool such as the image compressor, image resizer or WebP to JPG converter will serve you better.

Keeping an SVG safe to edit

Optimisation and maintainability pull in opposite directions, so it is worth deciding which copy you keep. A good habit is to preserve the original file — the one with comments, layer names and readable coordinates — as the master, and treat the optimised output as a build artefact that is regenerated whenever the master changes. Working backwards from an optimised file is unpleasant: the comments that explained the artwork are gone, the numbers have lost precision that may matter if the drawing is scaled, and the layer names that made the file navigable have been stripped. If you optimise a file you are still editing by hand, keep a copy of the original before you replace it.

There is a similar tension with precision. Rounding coordinates to two decimals is invisible at icon and logo sizes, but a large technical drawing or a map viewed at high zoom can show the difference. If that is your case, switch off the rounding option and leave the rest on: the metadata, comments and whitespace inside an exported drawing usually account for most of the weight anyway, and removing them changes nothing about how the geometry is drawn. The optimiser never touches the structure of the artwork itself — it does not merge paths or convert shapes to paths — so the optimised file remains readable to any conforming SVG viewer, and the same artwork stays intact.

Frequently asked questions

Does this tool upload my SVG?
No. The SVG is parsed and rewritten entirely in your browser with the built-in DOMParser and XMLSerializer, so the file never leaves your device.

Will optimising break my SVG?
The optimiser only removes things that do not change how a conforming viewer renders the file: comments, editor metadata, redundant whitespace, excess decimal precision and unused definitions. The live preview shows the result before you copy it, so you can confirm the artwork still looks right.

How much smaller will my SVG get?
It depends on the file. Exports from drawing applications are usually the biggest winners, because they carry editor metadata, private namespaces and long decimal coordinates. A hand-written icon may shrink only a little, since there is little waste to remove.

Which optimisations can I turn on or off?
Six of them: remove comments, strip metadata and editor namespaces, collapse whitespace, round numbers, minify colours, and remove empty or unused definitions. Each is an independent checkbox, so you can leave out anything you are unsure about.

Does it minify path data?
It rounds the numbers inside path data and similar coordinate attributes to a chosen number of decimals and strips leading zeros, which shortens the data without visibly changing the curve at normal display sizes.

What happens to colours?
Six-digit hexadecimal colours that can be written in three digits are shortened (for example #ffffff becomes #fff), and default or redundant colour values are dropped where the SVG specification allows them to be omitted.

Can I paste SVG source as well as drop a file?
Yes. Paste the markup into the input box and press Optimize, or drop an .svg file onto the input area. Either way the source is read locally and the optimised markup appears in the output box.

What is SVGO, and is this the same thing?
SVGO is the well-known command-line SVG optimiser that powers tools such as SVGOMG. This page performs a comparable, dependency-free set of the safest optimisations in the browser; it does not run the SVGO library itself.

Related: shrink raster images with the image compressor, change their dimensions with the image resizer, convert WebP files with WebP to JPG, or browse every browser-only utility on the all tools page.

All tools →  Image compressor →

Technical note: the optimiser uses the browser's built-in DOMParser and XMLSerializer with a dependency-free set of safe transformations, in the spirit of the SVGO family of tools. It runs entirely in your browser — no SVG content is sent anywhere. Search-demand figures quoted anywhere on this page are estimates, not measured guarantees.