Code → SVG

Render SVG code live in a sandbox

Paste SVG markup and see it drawn immediately. This is the fastest way to check what a snippet actually produces when you have copied it from a design tool, an icon set, or an answer online and want to verify it before committing it to your project.

How to use it

  1. Paste your SVG XML into the code panel.
  2. The preview redraws as you type, so syntax mistakes show up straight away.
  3. Adjust the markup until the shape, colours and viewBox look right.
  4. Copy the finished SVG back out, or export it as a PNG.

Frequently asked questions

Nothing appears when I paste my code. What is wrong?

The three usual causes are a missing viewBox, a width and height of zero, or shapes drawn outside the visible coordinate range. Check that your root element carries a sensible viewBox such as "0 0 24 24" and that fill is not set to none with no stroke.

Is it safe to paste SVG from an unknown source?

SVG can technically carry scripts, which is why the preview is sandboxed and the page runs under a strict Content Security Policy. Even so, treat markup from untrusted sources with the same caution you would give any downloaded file.

Does my code get sent anywhere?

No. Rendering happens entirely in your browser. Nothing is transmitted or stored.

Why will my external image not load inside the SVG?

An SVG that references an outside file with an image or use element needs to fetch it, and the page runs under a Content Security Policy that blocks external requests. Embed the image as a data URI instead, or work with self-contained markup.