SVG Viewer

// Open an SVG without a design app

An SVG is XML text that describes vector shapes. Modern browsers can draw it, but a raw browser tab is awkward when you need to inspect an unfamiliar file, compare transparent areas against different backgrounds, or check whether its declared size and viewBox agree. This viewer accepts a local .svg file or complete markup and puts those facts beside the rendered image.

Fit keeps the whole graphic in the preview. The 100% control shows one SVG pixel as one CSS pixel, while zoom and drag-to-pan make small details easier to inspect. Transparent shows clear pixels over a checkerboard; white and black let you judge the same SVG against common page colors. PNG and data URI exports use the selected background, while copied source and component code preserve the SVG itself.

// What the safe preview changes

SVG can contain script elements, browser event handlers, HTML inside foreignObject, and links to remote resources. Before anything is rendered, this page parses the document and removes those executable or external parts. The sanitized copy is the only markup sent to the image preview, source panel, and PNG exporter. Internal references such as url(#gradient) and href links to an ID in the same file remain available.

The intrinsic size comes from absolute width and height attributes when present. A missing edge can follow the viewBox aspect ratio; a viewBox-only file uses that box's dimensions, and a file with neither uses the browser's 300 by 150 default. Export can produce a typed React component, react-native-svg code, a UTF-8 data URI, or PNG downloads at 1x, 2x, and 4x. Every output uses the sanitized source, and the original file never leaves this browser.

// fair questions

How do I view an SVG file?

Drop an .svg file onto the input, click the file area to choose one, or paste complete SVG markup. The sanitized preview and file details update as soon as the browser can parse it.

Is it safe to open an SVG from an unfamiliar source?

The viewer removes script elements, on-event attributes, foreignObject content, and external href or CSS URL targets before rendering. It then loads that sanitized document as an image rather than inserting its elements into this page.

Does this SVG viewer upload my file?

No. File reading, sanitizing, previewing, copying, and PNG rendering all happen in your browser. Nothing you paste or choose is sent to a server.

What do width, height, and viewBox mean in an SVG?

Width and height describe the graphic's intrinsic display size. The viewBox describes its internal coordinate system and aspect ratio. A viewBox lets the same vector artwork scale without changing its geometry.

Can I change or optimize the SVG here?

No. Pretty print only makes the source easier to read, and the export options translate the sanitized SVG without changing its artwork. Use SVG Optimizer to reduce or clean markup, SVG to PNG for custom raster dimensions, or a vector design application when you need to change shapes and colors.