🖋️ SVG Previewer
Paste SVG code and see it render live — with element stats, the colors it uses, a one-click minifier, and data-URI, CSS and PNG export. Free, instant & 100% private — your code never leaves your browser.
%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2238%22%20r%3D%2216%22%20fill%3D%22%23ffffff%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M25%2078%20Q50%2055%2075%2078%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E)
🔒 Everything runs in your browser — your SVG is never uploaded. The preview is rendered as an image, so any embedded scripts are ignored for safety.
Preview, Inspect & Export — Safely
A real look at your SVG plus the numbers behind it, with scripts safely ignored and nothing uploaded.
Instant Live Preview
Paste code and see the SVG render immediately — on a checkerboard, light or dark background, with zoom.
Structure & Colors
See dimensions, a count of every element type, and swatches of every color the SVG uses.
Quick Minify
Strip comments and whitespace in one click and see exactly how many bytes you saved.
Data URI & CSS
Copy the SVG as a data URI, Base64 URI or a ready-to-paste CSS background rule.
Export to PNG
Render the vector to a crisp PNG at any size — 64px to 2048px — and download it.
Safe & Private
Rendered as an image so scripts never run, and 100% in your browser. Dark mode, responsive to 280px.
How to Preview an SVG
Four steps — it renders the moment you paste.
Add your SVG
Paste the full <svg>…</svg> code, drop an .svg file onto the box, or use Upload SVG. Hit Sample to try it.
Check the preview
It renders instantly. Switch the background or zoom to inspect edges and transparency.
Inspect & clean up
Review the dimensions, element counts and colors, and minify to shrink the file.
Export it
Copy a data URI or CSS rule, or download the SVG or a PNG at your chosen size.
Frequently Asked Questions
What it does, safety, why scripts don't run, SVG to PNG, data URIs, minifying, and troubleshooting.
What does this SVG previewer do?
Paste your SVG code and it renders instantly so you can see exactly how it looks. Alongside the preview you get its dimensions, a count of every element, the colors it uses, a minified version with the size saving, and ready-to-use exports — data URI, CSS background and PNG. It's a fast way to check, clean up and reuse any SVG.
How do I preview an SVG file?
Open the SVG in any text editor, copy the code, and paste it into the box. (You can open an .svg file with right-click → Open with → a code editor, or just drag it into a browser tab and view source.) The preview, stats and export options all update the moment you paste.
Is it safe to paste SVG code here?
Yes. The preview is rendered as an image, which means any <script> or interactive code inside the SVG is ignored and never executes — so a malicious SVG can't do anything. Everything also runs locally in your browser; your code is never uploaded or stored.
Why doesn't my SVG's JavaScript or hover effect work in the preview?
For safety, the SVG is shown via an image, and browsers don't run scripts or pointer interactions inside image-rendered SVGs. Declarative CSS and SMIL animations still play, but anything driven by JavaScript or :hover won't. That's intentional — it's also exactly how an SVG behaves when used in an <img> tag or as a CSS background.
How do I convert SVG to PNG?
Once your SVG previews correctly, choose a width in the Export section and click Download PNG. The tool renders the vector to a canvas at that size and saves a crisp PNG — pick a larger size for high-resolution output. Note that SVGs referencing external images or fonts may not export.
What is a data URI and CSS background export?
A data URI packs the whole SVG into a single string you can drop straight into an <img src> or CSS, removing the need for a separate file and network request. The CSS export wraps it in a ready-to-paste background-image rule. Great for small icons where one fewer request speeds up your page.
Does minifying change how the SVG looks?
No. Minifying only strips comments and unnecessary whitespace between tags, so the rendered image is identical — just smaller. For deeper optimization (removing hidden metadata, rounding path numbers), a dedicated optimizer like SVGO goes further, but this quick minify already trims most everyday bloat.
Why is my SVG not showing?
Usually the markup is incomplete or malformed — a missing closing tag, a stray character, or no <svg> root element. The previewer shows a clear parse error when that happens. Make sure you've copied the entire <svg>…</svg> block, including the opening tag with its xmlns attribute.