SVG Optimizer
Minify SVG by stripping comments, metadata, hidden elements, empty groups, whitespace, unused IDs. Live preview, size savings %, copy, download. 100% offline.
About this tool
A pure-JavaScript SVG minifier. Paste an SVG (or drop a .svg file, or paste from clipboard) and the tool strips comments, <metadata> / <title> / <desc>, elements with display:none, empty groups, and excess whitespace, plus optionally rounds numbers to 2 decimal places and removes unused id attributes. Each optimization can be toggled independently. The preview box shows the optimized SVG rendered at 160x160, the viewBox is read from the source, and the before / after byte sizes appear in a stats row with a "saved %" badge. The download button saves the optimized SVG to your device as optimized.svg. The output is a clean text block you can copy. Safe to use on icons and logos before committing them to a design system — typical savings on a hand-authored SVG from a tool like Figma or Illustrator are 20-50%, more on a copy-pasted SVG with embedded CSS and metadata.
Details
- Category
- developer
- Version
- 1.0.0
- Size
- 14 KB
- Updated
- Jun 2026
Frequently Asked Questions
Is this lossless optimization?
Visually, yes — it removes only things that have no rendered effect (comments, metadata, display:none, empty groups, excess whitespace, unused ids). It does not change path data, colors, or transforms. The one option with a visible effect is "Round decimals (2)" which truncates coordinate precision — for most icons and logos 2 decimal places is more than enough (the difference is sub-pixel), but for extremely large or high-resolution SVGs you may want to keep 3 or 4 decimals to avoid precision artifacts.
Why are unused IDs removed?
Many design tools (Figma, Illustrator, Sketch, Inkscape) auto-generate id="layer_42" type attributes for every shape, even when nothing references them. Keeping them just inflates the file. The tool scans for url(#id), xlink:href="#id", and href="#id" references and removes any id attribute that is not referenced. Be careful: if you embed the SVG inline in HTML and use CSS like #my-logo { ... } to style it from outside, that id WILL be referenced (via the CSS selector) but the optimizer cannot see that. In that case, turn off "Strip unused IDs".
Does this support SVGs with embedded styles or scripts?
It removes <style> blocks only via the metadata strip if you have it on — and only if the style tag is wrapped in <metadata>. Inline style attributes (style="fill:red") are kept. <script> blocks are kept as-is. If your SVG has animation (<animate>, <animateTransform>, <animateMotion>) those are kept too, and the optimizer will not touch their attribute values. Use the optimizer for static icons and illustrations; for complex animated SVGs, the savings will be smaller and you may want to keep the metadata.
What does the preview box show?
The preview box renders the optimized SVG using the standard browser SVG renderer. If the source has viewBox="0 0 24 24" and width="24" height="24", the preview shows it scaled to fit 160x160. If the source has no width/height, the optimizer does not add them — the browser will fall back to the viewBox or to 300x150 default. The viewBox is read from the source and shown in the card title as "viewBox: 0 0 X Y" so you can verify the optimizer did not mangle the coordinate system.
Is my SVG private?
Yes. The optimizer is pure client-side JavaScript inlined in the HTML. There are no network calls, no API uploads, no CDN. The file you drop or paste stays in your browser. The downloaded result lands in your local Downloads folder. You can optimize proprietary SVGs, customer logos, or internal iconography without any data being transmitted. The only file operations are the standard browser <a download> click and a FileReader for the drop-zone and file input.
