Markup / Web
SVG Playground
Write SVG markup with a live render - shapes, paths, gradients.
Runtime: Native iframe + SVG renderer
SVG source
Preview
About this playground
Type SVG XML on the left, see the rendered vector graphic on the right. Useful for designing icons, learning the <path> mini-language, debugging gradients and filters, or generating shareable diagrams. Everything renders client-side in a sandboxed iframe.
FAQs
Which SVG version?
Browser-native SVG 1.1 plus SVG 2 extensions (more elements, more filter primitives). Anything Chrome / Firefox / Safari can render works here.
Can I run <script> inside SVG?
The iframe sandbox allows scripts, so animation libraries like Snap.svg work. The iframe has no parent-origin access, so it's safe.
How do I export the rendered SVG?
Use Copy code to grab the source. To rasterise to PNG, open in a new tab and use your browser's screenshot tool, or use the QR-code generator pattern of canvas.drawSvg if you need it programmatically.
Will it work for animation?
Yes - SMIL <animate> elements, CSS animations on SVG, and JS-driven animations all run live in the preview.