SVG Viewer & Previewer

Preview, inspect, and convert SVGs with DOMPurify sanitization, JSX export, minification, and zoom controls.

Was this tool helpful?

How to Use

Preview, inspect, and convert SVG files directly in your browser. All rendering, sanitization, and conversion happens client-side using DOMPurify and native browser APIs. No files are uploaded to any server.

Load your SVG by pasting SVG code into the textarea, or drag and drop an .svg file onto the dropzone. The preview updates instantly as you type or edit the source.
Inspect the preview using the background toggle (White, Dark, Checkerboard) to verify how your SVG renders against different surfaces. The checkerboard pattern reveals transparent regions that may be invisible on solid backgrounds.
Zoom into details with the zoom controls: 50%, 100%, 200%, 400%, or Fit. Zooming uses CSS transform: scale() for GPU-accelerated rendering, so complex SVGs zoom smoothly without layout reflow.
Review stats in the info bar below the preview: file size, path count, element count, viewBox dimensions, and minified size.
Copy as JSX to get your SVG with all attributes converted to camelCase for React and Preact components. stroke-width becomes strokeWidth, class becomes className, and inline styles are converted to object syntax.
Copy Minified to get a cleaned-up version with comments, editor metadata, empty defs, and redundant whitespace removed. Typical savings range from 10% to 40% without affecting rendering.
Download the SVG file directly from the preview.

About This Tool

SVG (Scalable Vector Graphics) is an XML-based image format defined by the W3C. Unlike raster formats (PNG, JPEG, WebP), SVG describes shapes mathematically using paths, transforms, gradients, and filters. This means SVG images scale to any resolution without quality loss, render crisply on Retina displays, and can be styled with CSS or manipulated with JavaScript.

SVG Security and DOMPurify Sanitization

Raw SVG can contain executable content that poses cross-site scripting (XSS) risks. SVG supports inline <script> elements, event handler attributes like onload and onclick, and external resource references via xlink:href that could exfiltrate data. This tool sanitizes all SVG input through DOMPurify with the SVG profile enabled, which strips scripts, dangerous attributes, and foreign elements while preserving visual rendering. The sanitized output is what gets rendered in the preview pane, ensuring safe viewing of SVGs from untrusted sources like email attachments, third-party icon libraries, or design handoffs.

JSX Conversion for React and Preact

Standard SVG uses kebab-case attributes (stroke-width, fill-rule, clip-path), but JSX requires camelCase (strokeWidth, fillRule, clipPath). The converter handles all 90+ SVG-specific attribute mappings defined in the React reconciler, plus class to className, for to htmlFor, and inline style strings to JavaScript object syntax. The output is ready to paste directly into a .tsx or .jsx file.

SVG Minification

SVGs exported from design tools like Figma, Sketch, Illustrator, and Inkscape often include metadata that inflates file size without affecting rendering. The minifier strips XML declarations, HTML comments, editor-specific namespace attributes (xmlns:sketch, inkscape:*, data-name), empty <defs> blocks, and <metadata> elements. Whitespace is collapsed and trimmed between tags. This lightweight regex-based approach provides consistent 10-40% size reduction without the complexity of path optimization. For deeper optimization, run SVGO before pasting.

The viewBox Attribute

The viewBox attribute defines the coordinate system of the SVG canvas. It takes four values: min-x min-y width height. When present, the SVG scales proportionally to fit its container while preserving the aspect ratio defined by the viewBox. SVGs without a viewBox rely on explicit width and height attributes and will not scale responsively. The stats panel shows whether your SVG includes a viewBox.

Why Use This Tool

SVG files are everywhere in modern web development, but previewing and inspecting them is surprisingly inconvenient without dedicated tooling. Here are the most common scenarios where this viewer helps:

Design-to-code handoffs -- Designers export SVGs from Figma or Illustrator with bloated metadata. Preview the visual result, check the element count and file size, then copy the minified version for production use.
Icon library development -- When building or maintaining icon sets, use the checkerboard background to verify transparency, zoom to 400% to check path precision, and batch-convert to JSX for React/Preact component libraries.
Security review -- Before embedding user-submitted SVGs in a web application, paste them here to see the sanitized output. DOMPurify strips scripts, event handlers, and external references that could enable XSS attacks.
React/Preact migration -- Converting a codebase from inline SVGs to JSX components requires converting every kebab-case attribute. This tool handles all 90+ SVG attribute mappings including xlink:href, namespace prefixes, and style objects.
Debugging render issues -- SVGs that look correct in one browser may break in another. The preview pane uses the browser's native SVG renderer, so you can quickly verify rendering against different backgrounds and zoom levels without opening a separate application.
Quick file inspection -- Drop any .svg file from your filesystem to instantly see its dimensions, path complexity, and whether it includes a viewBox for responsive scaling.

Privacy

All SVG rendering, sanitization, and conversion runs entirely in your browser. Your SVG content never leaves your machine. There are no network requests, no server-side processing, and no data storage. The tool works fully offline once loaded.

FAQ

Is my SVG data sent to a server?

No. All SVG rendering, sanitization, and conversion happens entirely in your browser using JavaScript and DOMPurify. Your SVG content never leaves your machine. There are no network requests, no server-side processing, and no data storage.

How does SVG sanitization work in this tool?

The tool uses DOMPurify with the SVG profile to strip potentially dangerous elements like scripts, event handlers, and external references before rendering. This prevents XSS attacks while preserving the visual appearance of your SVG. The sanitized SVG is what gets rendered in the preview pane.

What does the Copy as JSX button do?

It converts standard SVG attributes from kebab-case to camelCase for use in React and Preact components. For example, stroke-width becomes strokeWidth, fill-rule becomes fillRule, clip-path becomes clipPath, and class becomes className. The output is ready to paste directly into a JSX component.

How does the SVG minification work?

The minifier performs lightweight regex-based cleanup: it strips XML declarations, HTML comments, editor metadata from tools like Inkscape and Sketch, empty defs blocks, and collapses redundant whitespace. This typically reduces file size by 10-40% without affecting rendering. For deeper optimization, consider running SVGO before pasting.

Can I zoom into SVG details?

Yes. The preview pane includes zoom controls at 50%, 100%, 200%, 400%, and a fit-to-container mode. Zooming uses CSS transforms for GPU-accelerated rendering, so even complex SVGs zoom smoothly without reflow.