sitekits.dev
press ⌘K to switch tools
IMAGE

SVG Viewer & Renderer

Paste SVG markup and preview the rendered image.

local
svg-viewer
§01 ABOUT THIS TOOL

Overview

SVG files are XML documents, which makes them easy to edit by hand but awkward to inspect — you cannot see the result without rendering it. This tool renders pasted SVG markup instantly on a checkered background, so transparent regions are visible. Before rendering, the markup is passed through DOMPurify with the svg and svgFilters profiles, which strips <script> elements and on* event handler attributes. Everything runs in your browser.

How to use

  1. Paste or type your markup into the SVG source field. A sample circle is loaded by default.
  2. Watch the Preview (sanitized) panel update as you type — no button press needed.
  3. Edit attributes like fill, width, or viewBox and see the effect immediately.

Examples

  • Tweak an icon’s color: change fill="#0060c0" to fill="#e0403f" and confirm the result before committing.
  • Debug a path: paste a <path d="…"> exported from a design tool to check whether the geometry is what you expect.
  • Verify a sanitization concern: paste an SVG containing <script> and confirm it renders without the script.

Notes

Because sanitization removes scripting, SMIL/CSS-driven animation may render but interactive behaviors will not. External references (remote images, fonts) may also be blocked by the sanitizer or your browser.

FAQ
Is my SVG uploaded to a server?
No. The markup is sanitized and rendered entirely in your browser. Nothing leaves your machine.
Why does my SVG look different from the original file?
The preview is sanitized with DOMPurify using its SVG and SVG-filter profiles: script elements, event handler attributes, and other non-SVG content are stripped before rendering, so interactive or scripted parts will not appear.
Is it safe to preview SVG files from untrusted sources?
Safer than opening them directly, because DOMPurify removes scripts and event handlers before the markup touches the DOM. Still, treat untrusted files with care in other contexts — a raw SVG opened in a browser tab can execute JavaScript.