About the SVG Viewer
Paste SVG markup and see it rendered immediately. Because SVG is XML rather than a binary format, a broken icon is usually a markup problem — a missing viewBox, a wrong fill, a clipped path. Rendering it here alongside the source, with a switchable background to reveal transparency, makes those problems visible.
How to use the SVG Viewer
-
Paste your SVG code
Drop in the full markup including the opening <svg> tag. The preview renders as soon as the markup parses.
-
Inspect the render
Switch the background between light, dark and transparent to check how the graphic behaves on different surfaces and whether fills are actually set.
-
Download the file
Save the SVG locally once it renders correctly.
When to use it
Checking an icon before use
Verify that an SVG copied from a design tool or an icon set renders as expected.
Debugging a broken graphic
Find out why an SVG appears blank — usually a missing viewBox, zero dimensions or a fill that matches the background.
Testing on different backgrounds
Confirm a white-filled icon is not invisible on a light surface before shipping it.
Frequently asked questions
Why does my SVG show up blank?
The usual causes are a missing or incorrect viewBox, width and height set to zero, a fill color identical to the background, or content positioned outside the visible viewport.
Is my SVG uploaded anywhere?
No. The markup is rendered by your browser and saved only to local storage.
Can I edit the SVG code here?
Yes — edit the source and the preview updates. This is a viewer and code editor rather than a vector drawing application, so there are no shape manipulation tools.
Are scripts inside the SVG executed?
SVG can contain script elements, which is why untrusted SVG is a security concern when inlined into a page. Treat any SVG from an unknown source with the same caution you would apply to HTML.
Related tools
Browse all free online tools on Tooly — every one runs in your browser, with no account required.