Skip to content
ToolHive

SVG Viewer

Paste SVG markup to render it instantly, zoom from 25% to 400%, check it against light, dark or checkerboard backgrounds, and read its dimensions, viewBox and element breakdown. Rendering is sandboxed, so pasted artwork cannot run scripts.

Image & SVG Tools

How to use SVG Viewer

  1. Paste the contents of an .svg file into the source panel.
  2. The preview renders immediately, with width, height and viewBox shown underneath.
  3. Zoom between 25% and 400% to inspect detail, or press Fit to return to 100%.
  4. Switch the background between checkerboard, light and dark to check transparency.
  5. Copy the markup or download it as image.svg.

Examples

A minimal icon

A viewBox makes the graphic scale to any size.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#3b82f6" />
</svg>

Why viewBox matters

Without a viewBox an SVG has no intrinsic aspect ratio and will not scale predictably in CSS. The tool tells you whether one is present.

Features

  • Live rendering as you paste or edit
  • Zoom presets from 25% to 400%, plus Fit
  • Checkerboard, light and dark backgrounds for checking transparency
  • Reads width, height, viewBox and total element count
  • Element breakdown showing which tags the file uses and how many of each
  • Warns when the file contains scripts, event handlers, foreignObject or external references
  • Reports XML parse errors instead of failing silently
  • Sandboxed preview with scripting fully disabled

Frequently asked questions

Is it safe to paste an SVG I downloaded?
Here, yes. SVG is active content — it can carry script elements, event-handler attributes and foreignObject — so the preview runs in an iframe with an empty sandbox attribute. Nothing in the file can execute or reach this page.
What does the security warning mean?
It means the file contains something that would execute if you inlined the SVG into your own page. That is worth knowing before you ship third-party artwork; treat it the way you would treat pasted JavaScript.
Why will my SVG not render?
SVG is XML, so it is stricter than HTML: every tag must be closed, every attribute quoted, and ampersands escaped. The tool reports the parser's message so you can find the problem.
What is a viewBox and do I need one?
The viewBox defines the coordinate system the graphic is drawn in. With one, the SVG scales cleanly to any size; without one it falls back to fixed width and height attributes and can behave unpredictably in flexible layouts.
Can I open a .svg file directly?
Open the file in a text editor and paste its contents. Nothing is uploaded either way, and pasting keeps the tool entirely client-side.
Does zooming change the file?
No. Zoom is a CSS transform on the preview only; the markup and the downloaded file are exactly what you pasted.

Related tools

About SVG Viewer

SVG Viewer is part of Image & SVG Tools on ToolHive, a growing collection of small, focused utilities for developers, designers and students. View, optimise and inspect images and SVG files entirely on your device. Everything runs client-side, so your data never leaves the browser tab — which makes these tools safe to use with work-in-progress code and private content.