Back

SVG Preview & Inspector

Paste or drop an SVG and see it rendered immediately, with a stats panel covering dimensions, viewBox, element breakdown, unique colors, and security flags. The preview runs inside a sandboxed iframe with scripts and same-origin access disabled, so hostile SVGs cannot execute code. Export the rendered image as SVG or PNG, toggle between white, black, and transparent-checkerboard backgrounds, or switch to source view to inspect the markup.

Specifications

Common Use Cases

  • Quickly preview an SVG icon or illustration before embedding it
  • Check an untrusted SVG for embedded scripts or event handlers
  • Verify the viewBox and intrinsic dimensions of an SVG
  • Count unique colors in an SVG (useful for palette extraction or optimisation)
  • Convert an SVG to a PNG on a coloured or transparent background
  • Inspect SVG element breakdown to spot unexpected <script> or <foreignObject> usage

Features

  • Sandboxed live preview — SVG is rendered inside an iframe with sandbox="" so scripts and event handlers cannot execute
  • Background toggle: white, black, or transparent checkerboard pattern
  • Stats panel: dimensions, viewBox, aspect ratio, byte size, element count, top element breakdown, unique colors
  • Security flags highlight SVGs containing <script>, event handlers, external references, or animations
  • Export as SVG or high-DPI (2x) PNG — selected background is baked into PNG exports
  • Fullscreen preview for inspecting details
  • Source view with syntax highlighting
  • Copy the normalised SVG to clipboard

Examples

Simple Icon

Try it →

A checkmark-in-circle icon using stroke-based drawing

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

Gradient Fill

Try it →

Rectangle filled with a linear gradient

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

SVG with Animation

Try it →

A pulsing circle using SMIL animation — Animations flag lights up

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Tips

  • Prefer viewBox over fixed width/height so the image scales cleanly
  • If the Scripts or Event Handlers badges light up, the SVG would run code when embedded — strip them before trusting it
  • Checkerboard background helps spot unintended transparency; switch to white or black to preview how the SVG looks on different pages
  • PNG export renders at 2× resolution; use SVG export to preserve vector quality
  • External references (http:// hrefs) will not load in the sandboxed preview — that is intentional
← Back to all tools