SVG Viewer & Optimizer

SVG Viewer & Optimizer

A browser-based toolkit for inspecting, optimizing, and reformatting SVG files. Paste SVG code, upload a file, or load from a URL. All processing runs locally, nothing leaves your browser.

View Tab

The View tab renders your SVG in a live preview with pan and zoom. Toggle to the tree explorer to see the full DOM hierarchy: every element, attribute, and child node. Hover over tree nodes to highlight the corresponding element in the preview. Switch to code view for syntax-highlighted source with line numbers.

The stats panel shows dimensions, file size, element count, path count, unique colors, and any external resource references. For quick exports, download as PNG at 2x resolution or grab the raw SVG. Need JPG or WebP? The “More formats” link sends you to the Image Converter.

Optimize Tab

Pick a preset and hit Optimize. SVGO runs entirely in your browser with four modes:

• Conservative: removes comments, metadata, and editor namespaces. Safe for almost all SVGs.
• Moderate: also collapses groups, converts colors, merges paths, and simplifies numeric values. Good default.
• Aggressive: maximum compression. May remove viewBox and title elements. Check the preview before downloading.
• Custom: toggle individual SVGO plugins like mergePaths, convertPathData, removeHiddenElems, and 15 others.

The before/after comparison shows original size, optimized size, percentage saved, and how many elements were removed.

Format Tab

Five formatting operations, each one click:

• Prettify: adds indentation and line breaks for human-readable SVG. Try the SVG Prettifier example with a pre-loaded minified SVG.
• Minify: strips all whitespace for smallest possible output.
• Inline CSS: moves <style> rules to inline style attributes on each element. Useful for email HTML and embedding SVGs in HTML documents.
• Absolute Paths: converts relative path commands (m, l, c, h, v) to absolute (M, L, C, H, V). Needed when embedding SVGs inside other SVGs or when the viewBox origin isn’t 0,0.
• Remove Metadata: strips Inkscape, Illustrator, Sketch, and Figma attributes, plus <metadata> elements and data-* attributes.

How to Use

1. Paste SVG code into the textarea, upload a file, or load from a URL.
2. Select a tab: View for inspection, Optimize for size reduction, Format for reformatting.
3. For optimization, choose a preset and click Optimize.
4. Download the result or copy it to clipboard.

Common Use Cases

Clean up exported SVGs

Design tools like Figma, Sketch, and Illustrator embed metadata that adds 10-40% overhead. Run your exports through the Conservative or Moderate optimizer before committing to a repo.

Embed SVGs in email HTML

Email clients often strip <style> blocks from inline SVGs. Use the Inline CSS formatter to move all styles to inline attributes, then paste the result into your email template.

Inspect unknown SVGs

Downloaded an SVG from a client or open source project? Use the View tab’s tree explorer and stats panel to understand its structure, find hidden metadata, or locate specific elements by hovering over the tree.