📖 Guide Images & Media

SVG Optimiser: Clean, Compress, and Preview SVG Files

Advertisement
🎨
SVG Optimizer & Viewer

Paste any SVG and get a cleaner, smaller version — with a live preview.

Use this tool →

Why SVG files are larger than they need to be

SVGs exported from design tools like Illustrator, Figma, Sketch, and Inkscape contain a great deal of data that is useful during editing but unnecessary in production. Editor-specific attributes like inkscape:zoom, sodipodi:docname, and Illustrator's ai:pinned-star serve only the application that created the file. The XML declaration, DOCTYPE declaration, and namespace declarations for editor-specific extensions add bytes without adding visual information. Comments, empty groups, default attribute values, and high-precision decimal coordinates (like path d="M 123.45678 234.56789") all inflate file size without improving rendering quality.

What the optimiser removes

Comments () are stripped entirely — SVG comments serve no purpose in the browser. Metadata elements (<metadata>, <title>, <desc>) are removed unless you specifically need them for accessibility (the title and desc elements can improve screen reader experience, so the option to keep them is available). Editor namespaces and attributes (all inkscape:*, sodipodi:*, and similar) are removed. Inline id attributes generated by editors are removed. The XML declaration (<?xml version="1.0"?>) is removed — HTML5 parsers do not need it.

Decimal rounding

Path coordinates and other numeric attributes in SVG often carry far more precision than is visually meaningful. A coordinate value of 123.45678 is visually indistinguishable from 123.46 at any real-world rendering size. Rounding all decimal values to 2 decimal places typically saves 15–30% of the coordinate data size, which is a significant portion of the total SVG size for complex paths. The visual difference is imperceptible.

Whitespace collapse

Human-readable SVG formatting includes indentation, line breaks, and extra spaces between attributes. None of this whitespace is meaningful to the browser's SVG renderer. Collapsing all whitespace between tags removes it, reducing file size. Enabling the "minify" option additionally removes whitespace within elements, producing a single-line SVG with no formatting at all — the most compact representation.

Typical size reduction

For SVGs exported from Illustrator or Inkscape, optimisation typically reduces file size by 30–70%. A complex icon exported from Figma might be 4KB; after optimisation it might be 1.5KB. Simpler icons with less editor metadata might only reduce by 15–25%. The before/after stats panel shows the exact saving in bytes and percentage for every optimisation run.

The live preview

The three preview panels show the optimised SVG on a white background, a dark background, and a transparent (checkerboard) background. This immediately reveals any rendering issues introduced by the optimisation — such as if an optimisation removes an attribute that was contributing to the visual output. If the preview looks wrong, undo specific options until the rendering matches the original.

Advertisement
🔧
Use the tool
SVG Optimizer & Viewer
💡
Pro Tips →
SVG Optimizer & Viewer
❓
Frequently Asked Questions
Common questions about SVG Optimizer & Viewer

📦 Recommended Resources

Handpicked books and tools — links may earn a small commission at no cost to you.