↑↓ 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.

Updated
Runs in your browser. Your SVG is not uploaded.

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 file do not run when an SVG is shown as an image, so opening an unknown file is safe.
  • 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.

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?

Yes. The file is shown as an image, and browsers never run scripts or open links in SVG images. Nothing is uploaded either.

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 the SVG Previewer.

  • SVG Validator

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

  • HTML Live PreviewDeveloper Tools

    Runs HTML, CSS, and JavaScript live in a secure sandbox with a console.