View, edit and optimize SVG files online. Preview SVG, clean up unnecessary attributes, copy or download.
The SVG Viewer lets you paste or open any SVG file, render it instantly in the browser, and optionally optimize the markup to strip out comments, redundant attributes, layer IDs, and extra whitespace - reducing file size without affecting the visual output. Edit the source directly in the code pane and the preview updates in real time. Download the cleaned SVG when you're done.
The SVG source code is inserted directly into the page's DOM as inline SVG, which causes the browser's native SVG rendering engine to parse and display it - the same way SVGs are rendered when embedded inline in HTML. Optimization is performed in JavaScript using a set of regex and DOM-based transformations that strip comments, remove data-* attributes, collapse empty elements, and trim insignificant whitespace, reducing file size without touching paths, shapes, or visual attributes. The optimized markup is then serialized back to a string for download.
SVG files can contain embedded JavaScript in <script> tags and event handlers like onload or onclick, which will execute when the SVG is rendered inline in the browser DOM. While most browsers apply the same-origin content security policies to inline SVG, you should still exercise caution with SVG files from unknown or untrusted sources. The safest approach for inspecting untrusted SVGs is to check the raw source for <script> tags before rendering, or use an isolated environment.
File size reduction varies significantly depending on the SVG's source: files exported from Figma often contain extensive metadata, layer IDs, and comments that can be removed for 20-40% savings. Illustrator exports tend to carry even more bloat through XML namespace declarations and unused attribute definitions. Programmatically generated SVGs (charts, icons from libraries) are typically already lean and may see minimal reduction. The optimizer provided here focuses on safe, non-destructive transformations - for maximum compression, tools like SVGO with all plugins enabled can achieve further reductions.
Yes - the code editor pane is fully editable, and the preview panel updates in real time as you type valid SVG markup. This makes it easy to change fill colors, stroke widths, or viewBox dimensions without opening a vector editor. Invalid or malformed SVG may render incorrectly or show a blank preview, but the code remains editable so you can correct it. The live-edit workflow is useful for quick attribute changes that would require multiple steps in Figma or Illustrator.
SVGO is the industry-standard command-line SVG optimizer that applies over 30 plugins including path merging, decimal rounding, and attribute collapsing - achieving deeper compression than this browser-based tool. This viewer is designed for quick, zero-setup use cases: paste an SVG, see it, make simple edits, and download a cleaned version without installing Node.js or running terminal commands. For production build pipelines, integrating SVGO via a bundler plugin is the right approach; this tool fills the gap for ad-hoc, in-browser inspection and minor cleanup.