👁️ SVG Preview
Paste SVG markup and see it rendered instantly — switch backgrounds, zoom in and out, and check its dimensions and size.
Frequently Asked Questions
Why preview on a checkerboard background?
The checkerboard shows through transparent regions, so you can see exactly which parts of the SVG have no fill — something invisible on a plain white or dark page. Switch to Light or Dark to see how the graphic looks on real page backgrounds.
Is it safe to paste an SVG from an unknown source?
Yes. The preview renders through an <img> element, and browsers disable scripts, external resource loading and interactivity inside SVG images — so a malicious SVG cannot run code here. The file also never leaves your device.
What do the width, height and viewBox values mean?
width/height set the SVG's default display size; the viewBox defines its internal coordinate system (min-x, min-y, width, height). An SVG with only a viewBox scales to its container — which is why icons usually omit fixed width/height. The tool reports whichever the file declares.
Why does my SVG render blank?
Common causes: no fill/stroke on the shapes (fill defaults to black — invisible on the dark background, so try Light), a missing xmlns="http://www.w3.org/2000/svg" attribute (required when SVG is rendered as an image), content placed outside the viewBox, or CSS classes that reference an external stylesheet (external resources are disabled in image rendering).
Can I shrink the SVG after previewing it?
Yes — use the companion SVG Optimizer tool (under Related Tools) to strip comments, metadata and editor junk and round coordinates, with before/after sizes.