SVG Viewer & Minifier

What is an SVG viewer and minifier?#

SVG is the format of choice for icons, logos, and line art on the web — it stays crisp at any size and is editable as text. But SVG files exported by design tools carry a lot of junk: Inkscape and Sodipodi editor namespaces, <metadata> blocks, authoring comments, and whitespace between every tag. That baggage inflates the file and gives anyone reading the source a headache. An SVG minifier strips what does not affect rendering and reports how much it saved.

This page is both a viewer and a minifier. Paste SVG source on the left, see it rendered on the right, switch to Minify to run a self-authored cleanup pass that removes comments, metadata, editor namespaces, and inter-element whitespace, and read off the byte savings. The preview is rendered through an image data URI so that any script embedded in the SVG never executes — you can safely inspect an untrusted file.

How to use it#

1. Paste your SVG into the Input pane on the left, or click Sample to load a small example.
2. The Output pane and the preview update immediately. By default the toolbar is on Minify, so the output is the cleaned, smaller SVG.
3. Switch to Restore if you want the output to show the original, untouched source (useful to compare against the minified version).
4. Read the stats panel under the panes:
   • Bytes before / Bytes after / Savings — the UTF-8 size of the input versus the output, and the percentage saved.
   • Removed summary — how many comments, metadata blocks, editor elements, editor attributes, and whitespace nodes were stripped.
   • viewBox — the width / height / viewBox geometry read off the root <svg>, so you can confirm the artboard size at a glance.
5. Use Copy or Download on the output pane to take the minified SVG. Use Clear to wipe both panes.

Key features#

• A real minifier, written from scratch — not svgo. svgo is the standard Node tool, but it depends on Node’s fs and path and does not run cleanly in a browser. This page ships its own tree walk, so it works with zero server-side dependencies.
• Five categories of junk removed. Comments, <metadata> blocks, Inkscape/Sodipodi namespace elements and attributes, and inter-element whitespace — each counted and reported.
• Text-aware whitespace handling. Whitespace inside <text>, <tspan>, <title>, <desc>, <style>, and <script> is preserved, so labels and embedded CSS survive the pass.
• Safe preview. The render uses an <img> with a data URI, which the browser treats as a non-executing image — scripts embedded in the SVG do not run. You can paste an untrusted file without risk.
• Honest byte accounting. Sizes are measured in UTF-8 bytes (not character count), so a file with CJK text or emoji reports its true on-wire size.
• 100% local. Parsing and serialization happen in your browser. The SVG never leaves the page.

Worked example#

A typical Inkscape export might open with several lines of editor namespace declarations and a <metadata> block before the actual art:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

Paste it, leave the mode on Minify, and the output collapses to:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

The stats panel reports roughly bytes before ~520, bytes after ~210, savings ~60%, with the removed summary showing 1 comment, 1 metadata block, and 1 editor attribute (inkscape:connector-curvature). The checkmark renders identically in the preview — nothing that affected the drawing was removed.

FAQ#

Does this run scripts embedded in the SVG?#

No. The preview is rendered as <img src="data:image/svg+xml;base64,…">, and images loaded through <img> are a non-scripting context — the browser will not execute any <script> inside that SVG. That makes the page safe for inspecting SVG files you did not author. The source <script> tag is preserved in the minified output, however; whether it runs depends on how you embed the SVG later.

Why not just use svgo?#

svgo is the right tool in a Node build pipeline, but it depends on Node’s fs and path modules and does not run cleanly in a browser tab. This page’s minifier is a self-contained tree walk with no Node dependencies, so it works fully client-side — at the cost of being less aggressive than svgo’s deepest optimizations.

The savings are small on my file.#

Files that were already hand-authored (no editor namespaces, no metadata, no comments) have little to remove, so savings may be just a few percent from whitespace. The biggest wins come from design-tool exports — Inkscape, Illustrator — which is exactly where the bulk of the junk originates.

Will minification change how the SVG renders?#

No, for the categories this tool removes: comments, metadata, editor namespaces, and inter-element whitespace carry no rendering semantics. Whitespace inside textual elements (<text>, <title>, <desc>, <style>, <script>) is deliberately preserved, because there it can be load-bearing.