SVG Live Preview with Isolated Sandbox
Preview SVG markup live in a sandboxed iframe with light, dark, and checkerboard backgrounds. Test native SMIL animation locally while keeping scripts blocked.
1 SVG source
Live as you type2 Isolated preview
Scripts blockedYour file is processed on this device and never uploaded.
How it works
From input to output,
in a few clicks.
Inspect SVG artwork as you edit without placing its elements in the host page. A sandboxed iframe renders each local revision in isolation, making it easy to compare transparency, sizing, and native animation against different backgrounds.
- Paste or upload markupAdd SVG source to the editor. The preview refreshes shortly after you stop typing and immediately after a file loads.
- Test the presentationSwitch between light, dark, and checkerboard backgrounds to inspect contrast and transparency.
- Render or save a revisionUse Render again to restart the isolated document, or copy and download the current SVG source.
Good to know
Frequently asked questions
Can SVG scripts run in this preview?
No. The iframe has a restrictive sandbox and no allow-scripts permission. SVG is loaded as a separate Blob document, never inserted into the main page, so embedded script execution remains blocked by the sandbox.
Why does native SMIL animation still work?
SMIL is browser-native document animation rather than JavaScript. A sandbox without allow-scripts can block script execution while the browser continues to render supported SMIL elements such as animate and animateTransform.
What happens when my markup has an XML error?
The tool reports the parser message and clears the preview instead of showing a stale rendering. Correct the markup and the live preview will run again automatically.