SVGMend

SVG viewer

View and inspect an SVG

Zoom in on details, check it against light and dark backgrounds, read its real size and viewBox, and click through the element tree to see where each part sits.

Runs in this tab. Nothing is uploaded.

100% Drag to pan · Ctrl + scroll to zoom
Open or drop an SVG to view it

Document

File
–

Elements

  • The outline appears here.

How to use the SVG viewer

  1. Open an SVG with the button, drop it anywhere on the page, or paste its code.
  2. Zoom and pan. Drag the canvas to move around. Zoom with the buttons, with Ctrl (⌘ on a Mac) and the scroll wheel, or with a trackpad pinch. With the canvas focused, the arrow keys pan, + and − zoom, 0 fits and 1 shows actual size. The readout in the corner shows the pointer position in the SVG’s own coordinates.
  3. Change the background. The grid shows transparency. Switch to white, black or any colour to check contrast, for example for an icon that has to work on a dark header.
  4. Explore the elements. Click an element in the outline to outline it on the canvas and list its attributes.

The document panel shows the width and height attributes, the viewBox, the size the SVG displays at by default, the file size and its gzip size (roughly what a web server sends), and which elements it contains.

Questions

Why does my SVG look different in another program?

Browsers, design tools and image viewers support different parts of SVG. Filters, fonts that aren’t installed, and CSS inside the file are the usual suspects. This viewer shows exactly what your browser renders.

What is the difference between width, height and viewBox?

The viewBox defines the coordinate system of the drawing; width and height set how large it is displayed. Without a viewBox, an SVG can’t scale and gets cropped when resized.

Is there a size limit?

No fixed limit, but SVGs with tens of thousands of elements take longer to outline. Only the first levels of the tree are shown until you expand them.

More SVG tools