SVG Optimizer
Losslessly minify SVG markup — strip comments, defaults, unused IDs, empty groups.
Overview
The SVG Optimizer rewrites SVG markup to shave bytes without changing the rendered image. Paste or upload an SVG and the tool returns a minified copy with comments stripped, default attributes dropped, unused IDs removed, empty groups collapsed and numeric precision trimmed — exactly the cleanup that hand-written or designer-exported SVG markup typically needs.
It is the standard move before inlining icons in a Razor component, before serving an SVG hero from a CDN, or before pasting an icon into a CSS background-image data URI. Frontend teams use it as a final pass to shrink SVG file size online without losing any visual fidelity.
How it works
The optimizer parses the SVG as an XML document, walks the element tree, and applies a series of rules. Comments are deleted, default attributes (like fill="black" when black is implied) are dropped, unused IDs are removed unless referenced by a <use> or url(#id), empty groups and metadata blocks are collapsed, and numeric attributes are rounded to a configurable precision (3 decimal places is a typical default).
Path data benefits from a separate pass: command letters can be uppercase (absolute) or lowercase (relative), and choosing the shorter encoding per segment shaves bytes. M 100 100 L 200 200 becomes M100 100l100 100 after the rewrite. Once every rule has run, the serialiser writes the result with whitespace stripped between tags.
Examples
Before:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by Sketch -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<g id="icon">
<path fill="#000000" d="M12.000 2.000 L22.000 22.000 L2.000 22.000 Z"/>
</g>
</svg>
After:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 2l10 20H2z"/></svg>
Size: 384 bytes → 102 bytes (73% smaller).
FAQ
Will my SVG look different after optimization?
No — every rule is lossless by construction. Numeric precision rounds to 3 decimals by default, which is below pixel resolution at any reasonable display size.
Should I keep the XML declaration?
For inline SVG inside HTML, drop it. For standalone .svg files, both forms are valid; the optimizer can preserve or remove it based on your preference.
Why are my IDs removed?
Only unused IDs are removed. IDs referenced by <use href="#id">, <clipPath>, <mask> or CSS selectors are preserved. If a JavaScript layer references IDs by string, mark them as preserved manually.
Does it inline external stylesheets?
No — embedded <style> blocks are preserved and minified, but external <link> references are left alone.
What about viewBox and width/height?
These are critical for responsive sizing and are always preserved. Removing them changes how the SVG scales in HTML.