SVG viewer
Open an SVG file — or paste its code — and see the drawing next to it, at any zoom and on any background. Nothing is uploaded.
Drop an SVG here or click to choose
Or paste the code below — either way it is read on this device
Drop an SVG or paste its code to see it here.
The preview is drawn from a cleaned copy: scripts, event handlers, foreign objects and links to files on other servers are stripped, and the result is rendered inside an image element rather than added to this page. The download and the copy button give you your original code back, exactly as you typed or dropped it — only the preview and the PNG are made from the cleaned copy.
Open an SVG in three steps
- Drop an SVG file in, or paste its code into the box.
- Zoom in, and switch the background to light, dark or checkerboard to see transparency.
- Download the file, copy the code, or export the drawing as a PNG.
Why an SVG is awkward to open
Double-clicking an SVG is a coin toss. Windows Photos shows a blank frame, macOS Preview renders it but flattens your view of the markup, and a lot of gallery and chat apps show a generic file icon because they only understand raster formats. The file is fine — it is a text document full of shape instructions, and the thing on your machine best equipped to read it is the browser you are in right now.
Dragging one into a browser tab does work, but it gives you the drawing on its own: no zoom that keeps a small icon legible, no way to see whether the background is white or transparent, and no sight of the code that produced it. This page puts the two side by side, because most of the time you open an SVG you are checking one against the other.
What gets cleaned, and what does not
An SVG is not just a picture. It can carry a script element, an inline event handler, a block of foreign HTML, or a reference to a font, image or stylesheet on somebody else's server. Rendering one naively means the file you were only trying to look at can execute code in the page and reach out across the network on your behalf.
So the preview here is not drawn from your file directly. A cleaned copy is made first — scripts, event handlers, foreign objects and every reference that leaves the document are stripped — and that copy is rendered inside an image element rather than added to the page. An image document runs no script, which makes the second measure independent of the first.
The copy you download and the code the copy button puts on your clipboard are your original text, unchanged. That distinction matters: a viewer that quietly returned a rewritten file would be sabotaging the very thing you came to inspect. Cleaning protects the person looking; it is not an edit to your artwork. The consequence is worth knowing too — if a drawing depends on an external font or a remote image, the preview shows it without that piece, while the file you keep still contains the reference.
Reading the drawing
The three backgrounds answer three different questions. Light is how the artwork will sit on a normal page. Dark shows whether a mark drawn in near-black disappears on a dark interface, which is the usual reason a logo needs a second colourway. Checkerboard shows what is actually transparent, and it regularly catches a white rectangle sitting behind a logo that everyone assumed had a clear background.
Zoom exists because the interesting failures happen at the extremes. Take an icon up to several hundred per cent and misaligned strokes, half-pixel offsets and stray leftover shapes become obvious; take a detailed illustration down to icon size and you find out whether it still reads at all. Vectors do not blur when enlarged, so nothing you see at high zoom is an artefact of the viewer.
The size shown under the preview is the SVG's own intrinsic size, which is what a browser uses when no width is given in CSS. A file that reports 300 × 150 is telling you it has no intrinsic dimensions at all — that is the browser's default for an SVG without width, height or a viewBox to work from, and it is worth fixing before the file goes into a layout.
Frequently asked questions
Why does my SVG not open in a normal image viewer?
Because it is not an image file in the way a PNG is. An SVG is a text document describing shapes, and most desktop photo viewers and file previews simply do not read it — Windows Photos and many gallery apps show a blank tile or nothing at all. A browser does read it, which is why dropping the file here works when double-clicking it did not.
Does the code I download or copy come back changed?
No. The download and the copy button hand back the exact text in the code box — your file, byte for byte, if you dropped one and did not edit it. Only the preview and the PNG export are built from a cleaned copy. That split is deliberate: cleaning is there to protect the person viewing the file, not to quietly rewrite the file they came to inspect.
What exactly is removed before the preview is drawn?
Script elements, every on* event handler attribute, foreignObject elements, and any href, src or CSS url() that points anywhere except inside the same document or at a data:image/ value. Style blocks containing @import or an outside url() go too. What is left — paths, shapes, gradients, filters, embedded data images — is what you see. The cleaned copy is then rendered inside an img element rather than inserted into this page, so even a missed script would have nowhere to run.
My SVG looks different here than in my editor. Why?
The usual cause is a reference that was stripped: a web font pulled from Google Fonts, a background photo loaded from a CDN, or an external stylesheet. Those are exactly the references a viewer must not follow, because following them would send a request — and a note of which file you are looking at — to somebody else. The second cause is fonts: text in an SVG is drawn with whatever font your device has, so a design that names a font you do not have installed falls back to a substitute here just as it would on any other machine.
Do animations play?
That depends on how the drawing is being shown, and this preview shows it as a picture. Opened as a document — its own browser tab, or an object or iframe embed — SMIL and CSS animation written inside the file play. Used as a picture, in an img element or a CSS background, whether that animation runs is the browser's own call: Chrome, measured here, held both a CSS and a SMIL animation on their first frame. So a still preview is a fact about the viewer rather than about your file — open the SVG in a tab of its own to see it move. What never runs either way is anything driven by JavaScript, because script is removed and an image document could not execute it in any case.
Can I edit the code and see the change?
Yes — the box is editable and the preview redraws as you type, about a fifth of a second after you stop. It is a quick way to try a fill colour, a viewBox or a stroke width without opening a design tool. If what you type stops being valid SVG the preview clears and says where the parser gave up, rather than leaving the last good drawing on screen pretending to be current.
Is there a size limit?
Files up to 5 MB, with intrinsic sides up to 8192 pixels, and a PNG export capped at 40 million pixels. Those ceilings are about your browser's memory rather than any quota of ours — there is no server involved to have a quota.