QQuickKit

SVG Viewer

Paste SVG code and preview the rendered result instantly. Supports background toggle (white, dark, checkerboard) and zoom controls. Rendered in a sandboxed iframe for complete XSS isolation.

Background
Zoom
Paste SVG code above to preview

About This Tool

QuickKit SVG Viewer lets you paste any SVG code and instantly preview how it renders in a browser. Switch between white, dark, and checkerboard backgrounds to inspect transparency, and adjust the zoom level to examine fine details or fit the full graphic. Every preview runs inside a sandboxed iframe with no JavaScript execution allowed, so even untrusted or editor-exported SVG code is completely safe to inspect.

Features

  • ✓Instant Preview — SVG renders in real time as you type or paste — no click required.
  • ✓Background Toggle — Switch between White, Dark, and Checkerboard backgrounds to inspect opacity and transparency clearly.
  • ✓Zoom Control — Fit the SVG to the preview area or view it at 50%, 100%, or 150% scale.
  • ✓XSS-safe Sandbox — Preview runs in an iframe with sandbox="" — JavaScript inside the SVG is completely blocked, regardless of content.
  • ✓Copy & Download — Copy the SVG source to clipboard or download it directly as an .svg file.

FAQ

Why use a sandboxed iframe instead of dangerouslySetInnerHTML?
SVG supports JavaScript via <script> tags and event attributes. Rendering untrusted SVG with innerHTML risks XSS. A sandboxed iframe with no allow-scripts attribute blocks all script execution at the browser level, regardless of the SVG content.
Do SVG animations work in the preview?
Yes. CSS animations and SMIL animations (animate, animateTransform) are not JavaScript and continue to work normally inside sandbox="".
What is the checkerboard background for?
SVG often contains transparent regions. A checkerboard pattern makes transparency visible, just like Photoshop and Figma do.
Can I preview SVGs exported from Illustrator or Inkscape?
Yes. You can paste the raw SVG export directly — the viewer handles any valid SVG, including those with editor metadata. Combine it with SVG Optimizer to clean the code before finalising.

Further Reading