SVG Viewer

How to use

1. 1Paste SVG markup into the source box on the left, or click Open file to load a .svg file from your computer. Use Load sample if you want a starter to play with.
2. 2Watch the preview update on the right. The preview frame is sandboxed: <script> tags, on* event handlers, and javascript: hrefs are stripped before render, and a yellow notice tells you when something was removed.
3. 3Pick a Background (Transparent checker, Dark, Light, White, Black, or Custom color) and a Zoom level (25 to 400 percent) to confirm how the SVG looks against the surface it will ship on.
4. 4Read the Info panel for intrinsic width and height, the aspect ratio, whether a viewBox is present, the per-tag element breakdown, and the UTF-8 byte size of the source.
5. 5Use the Copy helpers to grab a minified SVG, a base64 data URI, a URL-encoded data URI, or a JSX-friendly snippet. Click View source to copy the exact sanitized markup the preview is rendering.

About this tool

SVG Viewer renders any SVG you paste or open right in your browser, so you can confirm what a file actually looks like before committing it to a repo, embedding it in a design, or shipping it on the web. The input panel accepts pasted markup up to two million characters or an opened .svg file up to five megabytes, parses it with the browser's built-in DOMParser, surfaces the first parse error in a friendly readable form when the markup is malformed, and then renders the result inside a sandboxed preview. Before the preview mounts, the tool walks the parsed tree and removes every <script> element, every event handler attribute (anything that starts with on, like onload, onclick, onmouseover, and so on), and any href or xlink:href whose value begins with javascript:, so an SVG dropped in from an unknown source cannot execute code in this tab. The preview frame supports six background presets (a true-transparent checker, dark, light, white, black, and a custom color picker) so you can confirm how the SVG holds up against the surfaces it will live on, plus eight zoom levels from 25 percent to 400 percent for quick close-ups of glyphs, paths, and tiny icons without leaving the page. The Info panel reads the intrinsic width and height attributes off the root svg element, falls back to the viewBox when those are missing, computes the rendered aspect ratio (matched to common ratios like 1:1, 16:9, 4:3 when close), reports whether a viewBox is present and what it is (so you can spot files that will scale strangely), counts every element and groups them by tag name (path, rect, circle, g, defs, use, text, image, and the rest), and shows the UTF-8 byte size of the source. The Copy helpers panel emits four ready-to-use outputs in parallel: a minified single-line SVG with comments stripped and whitespace collapsed, a base64 data URI that drops straight into a CSS background-image or an img src, a URL-encoded data URI that is often smaller than the base64 form for icon-sized SVGs, and a JSX-friendly snippet with kebab-case attributes (stroke-width, fill-rule, clip-path, xlink:href) converted to the camelCase form React expects (strokeWidth, fillRule, clipPath, xlinkHref). A View source button reveals the sanitized markup that the preview actually renders, so you can copy the safe-to-embed version of an untrusted file. Useful for designers checking exports from Figma, Illustrator, Inkscape, and Sketch; developers grabbing icons off the web and verifying they render cleanly before adding them to a UI library; and anyone who just wants to open an SVG without dragging it into a heavy desktop application. Everything happens in this browser tab. The file you paste or open is never uploaded, never logged, and never persisted anywhere off-device.

Free to use. Works in your browser. No signup, no login.