↑↓ to move · Enter to open · Esc to close

SVG Viewer

Open an SVG file or paste SVG code to see it drawn right away. This SVG viewer shows the image on light, dark, or checkerboard backgrounds, zooms from 25% to 800%, and lists its size and viewBox.

Runs in your browser. Your SVG is not uploaded.
Built by · Updated

Your SVG

View

Background
100%

Previews as you type. Scripts and links inside the SVG are not run.

Preview

Your SVG will appear here
  1. Paste SVG code, upload a file, or load a URL
  2. Pick a background and zoom
  3. Check the size facts below

How to use the SVG Viewer

  1. Paste SVG code, drop an .svg file on the text box, or press Upload .svg.
  2. The image appears below and updates as you edit the code.
  3. Switch the background to check white or light parts on a light page and dark parts on a dark one. The checkerboard shows which areas are transparent.
  4. Use the zoom slider to look closer, or Fit to fill the width.

How it works

The SVG is drawn by your browser as an image, the same way it would appear in an <img> tag on a web page.

  • Scripts, event handlers and links inside the SVG are inactive in this image preview. They remain in the original file.
  • The intrinsic size is the size a browser gives the image when nothing else sets it: the width and height attributes if they are there, otherwise the viewBox size, otherwise the default of 300 × 150 pixels.
  • Zoom scales that intrinsic size. Because SVG is vector, it stays sharp at every zoom level.

Examples

  • The sample icon has width="64" height="64" and viewBox="0 0 64 64", so its intrinsic size is 64 × 64 px. At 400% it fills 256 × 256 px and still has clean edges.
  • An icon drawn in currentColor with no fill shows as black on the light and checkerboard backgrounds, because an image has no surrounding text color.
  • An SVG with only viewBox="0 0 10 5" gets an intrinsic size of 10 × 5 px.

Why an SVG can have a size but show a blank preview

A file can have readable SVG markup and a size but still contain nothing the browser can draw. Compare these two inputs:

This rectangle has an intrinsic size of 32 × 16 px:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" viewBox="0 0 32 16">
  <rect width="32" height="16" fill="#1f6b49"/>
</svg>

This second file has a 24 × 24 viewBox, but its use element refers to an ID that is not defined:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <use href="#missing"/>
</svg>

The size panel can still show 24 × 24 px while the preview is blank. Paste the second input into the SVG Validator to find the broken reference to #missing. For a white drawing, try the Dark background first. For a drawing outside its viewBox, check the coordinates with the SVG ViewBox Generator.

Limitations

  • Images and web fonts linked from the SVG are not loaded, because browsers block external files in SVG images.
  • Animations in CSS and SMIL play, but anything driven by JavaScript does not.
  • To find problems in the code, use the SVG Validator. To turn the SVG into a PNG, use SVG to PNG.

Frequently asked questions

How do I open an SVG file?

Any current browser opens SVG files. Here you can also paste the code, switch backgrounds, zoom in, and see the viewBox and size at the same time.

Is it safe to preview an SVG from someone else?

The SVG is rendered as an image in this page, where scripts and links inside the image are inactive. Processing stays in your browser. The preview does not sanitize or rewrite the original SVG.

Why is my SVG invisible or tiny?

Often the drawing is white on a white background (switch to Dark), or the file has no size and no viewBox, so it falls back to 300 × 150 and the drawing sits outside that area.

Why does my icon look black here but colored on my site?

It probably uses currentColor, which takes the text color of the page around it. As a standalone image there is no text color, so it shows as black.

Often used together with SVG Previewer.

  • SVG Validator

    Checks SVG files for XML errors, broken references, typos, and unsafe code.

  • SVG to PNG

    Turns SVG files into sharp PNG images at any scale, with transparency.