rankato

Preview and inspect any SVG

Drop an SVG or paste the source. Instantly see it against transparent, checkerboard, white, black, or a custom background — and inspect the underlying markup.

Sometimes you just need to see what an SVG looks like — a client sent you a file, a designer shared a link, or you're checking whether a mystery .svg in your repo is what you think it is. The Rankato SVG Viewer is the fastest way: drop the file (or paste the source), pick a background, and you see it. Zoom, pan, and inspect the markup in a code panel to check viewBox, embedded scripts, or license comments. No install, no upload, nothing lost.

Backgrounds — see the SVG in context

Icons and logos are designed against specific backgrounds. Toggle between transparent (with checkerboard indication), white (default UI background), black (dark UI background), and a custom color picker to see how your SVG performs in each context. Semi-transparent fills that look great on white can disappear on white-alpha; hairline strokes that look elegant on black may be invisible on white. Test everything before you ship.

Zoom and pan

Mouse wheel to zoom, space+drag to pan, F to fit-to-viewport, 1 to reset to 100%. Zoom range is 10% to 3200% — plenty to inspect anti-aliasing behavior at extreme scales or to check the overall composition at a distance.

Source inspection

The bottom panel shows the raw SVG source with syntax highlighting. Search inside the source with Ctrl+F, click any tag to highlight the corresponding element in the preview, and hover the code to see element bounding boxes appear on the canvas. Great for figuring out why a specific element is where it is.

Metadata and viewBox

The right panel shows a summary card: file size, intrinsic width/height, viewBox, number of paths/rectangles/circles/text elements, embedded resources (external images or fonts), scripts (with a warning if present), and any XML comments. This is the fastest way to answer questions like 'why is this SVG 500 KB' or 'does this contain a script.'

Export options

Export the SVG in a few forms without leaving the viewer: Rasterize hands off to SVG-to-PNG at your current zoom level; Minified copy outputs a whitespace-stripped version; Data URI produces a paste-ready inline URI. Copy any of them without downloading.

Tool FAQs

Everything you need to know about using SVG Viewer.

Is the viewer safe for untrusted SVGs?+

Reasonably — SVGs render inside a sandboxed iframe, which blocks scripts and cross-origin fetches. If the SVG contains a <script>, the tool shows a warning and disables the preview until you explicitly acknowledge. For a truly hostile SVG, still don't render it in your production app.

Does zoom preserve sharpness?+

Yes — SVG scales vectorially, so 1600% zoom shows the same crisp edges as 100%. If you see pixelation at high zoom, that means the SVG contains an embedded raster (<image> element).

Can I open a URL directly?+

Yes — paste the URL into the input field and the viewer fetches (subject to CORS). If the target blocks CORS, download the file first and drag it in.

Does the viewer render SVG animations?+

Yes — SMIL animations (<animate>, <animateTransform>) and CSS animations inside <style> both play. Scripts don't execute.

What's the file size limit?+

10 MB. Larger SVGs almost always indicate embedded rasters — extract them via the SVG Editor if you want to work with the raster separately.