SVG Viewer

How to use the SVG Viewer

Paste SVG code or open an .svg file.

Look at the preview and the status line with width, height, viewBox and size.

Switch the background between checkerboard, white and dark to check transparency.

Edit the code if needed, then download the SVG.

SVG viewer: preview and check SVG files

SVG (Scalable Vector Graphics) is an XML-based image format: the file is text describing shapes, paths and colors. That means you can edit an icon in a text editor, but also that a single typo breaks the whole image. This SVG viewer renders your markup, validates it as XML and reports the key sizing attributes, so you can see instantly whether an icon or illustration is correct.

What the viewer reports

Rendering – the image scaled to fit the preview area.
XML errors – if a tag is not closed or an attribute is malformed, you get the parser's message, with the line number where possible, instead of a blank image.
width, height and viewBox – the three attributes that decide how an SVG scales.
File size – useful for spotting icons that are bloated by editor metadata.

Understanding viewBox

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
  <path d="M8 12l3 3 5-6" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>

The viewBox defines the internal coordinate system (here 24 × 24 units). width and height define how large the image is drawn. Keep the viewBox and you can scale the icon to any size with CSS without distortion. An SVG with width and height but no viewBox does not scale properly, a common reason icons look cropped.

Backgrounds

The checkerboard reveals transparent areas. Switch to white or dark to test icons that will sit on light or dark interfaces; an icon drawn with currentColor (like the example above) inherits the text color of its container, which is black in the preview.

Common SVG problems

Missing namespace – stand-alone SVG files need xmlns="http://www.w3.org/2000/svg" on the root element, or browsers will not display them as images.
Unescaped characters – an & in text or a URL must be written as & in XML.
Editor bloat – design tools often add metadata, comments and unused definitions. Clean the code with the SVG formatter to read it more easily.

Security note

SVG can contain scripts and links. The preview runs inside a sandboxed frame, so scripts cannot reach this site, but be careful when embedding SVG files from unknown sources directly into your own pages; prefer loading them with an <img> tag, which does not run scripts.

To embed a finished SVG in CSS or HTML without a separate file, convert it with SVG to Base64. Everything is processed locally.

Frequently asked questions

Why is my SVG not displaying?

The most common causes are an XML syntax error, which the viewer reports, and a missing xmlns attribute on the svg element. Also check that shapes lie inside the viewBox area.

What is the difference between width, height and viewBox?

viewBox defines the internal coordinate system of the drawing, while width and height set the size at which it is displayed. Keeping a viewBox lets the image scale cleanly.

Can I edit the SVG here?

Yes. Change the code in the editor and the preview updates immediately. When you are happy, download the edited SVG file.

Is it safe to open SVG files from the internet?

The preview is sandboxed, so scripts inside an SVG cannot access this site or your data. Be more careful when embedding unknown SVG code inline on your own pages.