SVG Viewer
Paste SVG markup and watch it render as you type
What is SVG Viewer?
This SVG viewer renders the markup on the left into a live preview on the right. Switch between a checkerboard, white, or dark backdrop, use Fit to blow a tiny icon up to a readable size, pick the color that fill="currentColor" resolves to, then export a PNG or copy a data URI. The preview loads through an <img> tag, so scripts never run, external resources are never fetched, and your markup is never uploaded.
How to use SVG Viewer
- 1Paste SVG markup into the left pane, or open a local .svg file.
- 2The preview renders immediately and keeps up with every keystroke.
- 3Use Fit to enlarge small icons, and switch backgrounds to check transparency and how the shape reads on dark surfaces.
- 4If the artwork uses currentColor, pick a color to check contrast.
- 5Export a PNG for a raster copy, or copy the data URI to drop it into CSS.
How do I do this in code?
Use the tool above for one-off work; for anything you repeat, move it into a script or your project.
/* Escape # as %23 inside a data URI, or it is treated as a fragment
identifier and everything after it is dropped */
.icon {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22%231d6f5c%22%3E%3Cpath d=%22M4 10h12%22/%3E%3C/svg%3E');
}Common errors and how to fix them
| Symptom | Cause | Fix |
|---|---|---|
| Zooming in grows the canvas but the artwork stays small in the top-left corner. | The markup has width and height but no viewBox. Without a viewBox, resizing changes the canvas only — the coordinate system does not scale with it. | This tool derives an equivalent viewBox from width and height before rendering, which is why zooming works here. Use the markup from "Copy data URI", or add viewBox="0 0 width height" to the root element yourself. |
| The icon renders solid black, or disappears entirely on a dark background. | fill="currentColor" inherits color from an ancestor. With nothing to inherit from it falls back to the initial value, black. | Pick a color with the currentColor control to preview the result. In your own project, set color on a wrapping element or replace currentColor with a literal value. |
| SVG copied out of a React component fails to parse. | JSX uses camelCase attributes such as strokeWidth and className, and often carries {...props} expressions. None of that is valid XML. | Convert the attributes back to their hyphenated form (stroke-width, class) and delete the expressions. For the opposite direction, use the SVG to React component tool. |
Frequently asked questions
Is it safe to preview an SVG someone sent me?+
Yes. The preview goes through an <img> tag, and the spec puts SVG loaded that way in secure static mode: any <script> inside it is ignored and external images or fonts are never requested. The tool also lists any scripts, event handlers, and external references it finds — harmless here, but they do execute once the same markup is inlined into HTML.
Why does the exported PNG come out at that size?+
It matches the pixel size currently on screen, so what you see is what you get. In Fit mode that number tracks the window, so switch to 100%, 200%, or 400% for a stable size, or set width and height in the markup first. The longest edge is capped at 4096 pixels.
How is this different from the SVG optimizer?+
This tool only looks: render, zoom, swap backgrounds and colors, export. The optimizer edits: it strips editor metadata, comments, and redundant whitespace. The usual order is to confirm rendering here first, then optimize.
Do SVG animations play?+
SMIL animations (<animate>, <animateTransform>) and CSS animations both play normally inside an <img>. Only JavaScript-driven animation stays still, because scripting is disabled for images.
Related tools
All toolsImage Compressor
Compress images in your browser — no uploads
Image Format Converter
Convert between PNG, JPEG, WebP, and AVIF
Image Resizer
Resize images to exact dimensions, with optional aspect lock
Image to Base64
Turn images into data URIs with ready-to-use snippets
Favicon Generator
Generate multi-size icons and a favicon.ico
SVG Optimizer
Strip SVG cruft without touching path data