RevealTheme logo

SVG Optimizer

Strip comments, the XML declaration, the DOCTYPE, and collapsible whitespace from SVG markup with a lightweight regex pass that runs entirely in your browser.

How to use this tool

  1. 1

    Paste your raw SVG markup into the input box.

  2. 2

    Read the byte count and percentage saved shown above the result.

  3. 3

    Review the minified SVG in the output box to confirm it still renders correctly.

  4. 4

    Click Copy to put the optimized markup on your clipboard.

What does optimizing an SVG actually remove?

SVG (Scalable Vector Graphics) is an XML-based vector format, so its source is plain text that browsers parse like any other markup. Files exported from Figma, Illustrator, or Sketch usually carry baggage that has no effect on rendering: HTML-style comments, the <?xml ...?> processing instruction, a <!DOCTYPE> line, and indentation added for human readability. This tool strips those with a set of regular expressions. It removes comments, the XML declaration, and the DOCTYPE; it collapses runs of whitespace to a single space and deletes whitespace between tags and before the closing bracket; and it drops xmlns: namespace declarations except the xlink one, which is still referenced by some href attributes. Because it works by pattern matching rather than parsing the XML tree, it is fast but naive — it does not simplify path data, merge attributes, reduce numeric precision, or remove unused defs and ids. It also assumes whitespace is insignificant, which is true for most icons but not for SVGs that embed <text> with preserved spacing or CDATA scripts. Treat it as a quick first pass, not a full optimizer.

Common use cases

  • Shrinking icon SVGs exported from Figma before pasting them inline into a React or Vue component.

  • Cleaning up Illustrator output that ships with a verbose XML header and editor comments.

  • Reducing the size of small inline SVGs embedded directly in HTML to trim page weight.

  • Removing designer metadata and indentation before committing icons to a shared repo.

  • Quickly checking how many bytes a given SVG can save before reaching for a heavier build-time tool.

  • Tidying SVG snippets pasted into a CMS or email template where extra whitespace bloats the payload.

Frequently asked questions

Is this as good as SVGO?
No. SVGO parses the SVG into a real tree and applies dozens of plugins — path simplification, attribute merging, numeric precision reduction, removing unused ids and defs. This tool only does whitespace collapsing and header/comment stripping with regexes. For production assets, run SVGO; use this for an instant, dependency-free first pass.
Does my SVG get uploaded anywhere?
No. The optimization runs entirely in your browser with JavaScript. Nothing is sent to a server, and the Copy button uses your local clipboard.
Why might the output break my image?
Because it collapses whitespace by pattern matching, not by parsing XML. SVGs that rely on significant whitespace — such as <text> with xml:space="preserve" or embedded <script>/CDATA — can change behavior. Always preview the result before shipping it.
What is the xlink namespace and why is it kept?
Older SVGs reference resources with xlink:href instead of plain href. The tool deletes unused xmlns: declarations but deliberately keeps xmlns:xlink so those references don't break. Other editor namespaces (like Illustrator's) are removed.
Why does the percentage saved vary so much?
Savings depend entirely on how much whitespace and metadata your file carries. Heavily indented, comment-laden editor exports can shrink noticeably, while an already-minified one-line SVG may show little or no change.
Does it change how the SVG looks?
It should not. The transformations only touch comments, headers, namespaces, and insignificant whitespace — not the path, shape, or style data that determines the rendering. The exceptions are the whitespace-sensitive cases noted above.

Related tools