SVG Viewer

How to Use the SVG Viewer

Upload an .svg file, or paste raw SVG markup directly into the text box, the preview and dimension info update instantly either way. The Width, Height, and ViewBox values are read directly from the SVG's own attributes, and "Download as PNG" rasterizes the current preview into a downloadable PNG file at the SVG's native size.

What This Tool Actually Reads

An SVG file is just a text document, so this tool doesn't decode pixels the way a JPG or PNG viewer does, it parses the markup as XML and pulls three attributes straight off the root <svg> element: width, height, and viewBox. If a designer exported a file with width="200" height="100" viewBox="0 0 200 100", both the Width and Height cards show 200 and 100 directly. But plenty of hand-written or icon-library SVGs skip width/height entirely and rely only on viewBox="0 0 24 24", letting CSS or a parent container decide the actual display size. In that case Width and Height correctly show "not set", that isn't a bug in the file, it's the SVG deliberately staying flexible so it can be dropped into any layout at any size.

Worked Example: A Simple Icon

Paste a minimal circle icon like <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#4F46E5"/></svg> into the code box. The preview shows a filled indigo circle, the ViewBox card reads "0 0 24 24", Width and Height both read "not set" since neither attribute appears in the markup, and File Size reads around 78 bytes, the exact byte count of that short string of text. Click "Download as PNG" and the export logic falls back to the viewBox's third and fourth numbers (24 and 24) since no explicit width/height exists, producing a 24x24 PNG. That's correct behavior, but a 24x24 PNG looks pixelated if you then open it at 400% zoom, because you've converted an infinitely-scalable vector into a small fixed-resolution bitmap. To get a larger, still-crisp PNG, add width="512" height="512" to the same markup before exporting, the circle's proportions stay identical since the viewBox ratio (1:1) matches, but the canvas the export draws onto is now ten times larger.

Reading the ViewBox Correctly

The four numbers in a viewBox are min-x, min-y, width, height, in that order, not x, y, width, height of the visible canvas in isolation. The first two numbers shift the coordinate origin, useful when artwork was drawn around a point other than (0,0), while the last two set how many SVG user units are visible before content gets clipped or the viewport scales to fit. A viewBox of "0 0 24 24" means content from x=0 to x=24 and y=0 to y=24 is visible. A viewBox of "-12 -12 24 24" shows the exact same 24x24 window of space, just recentered so (0,0) sits in the middle instead of the top-left corner, common in icon sets built around a centered origin. This tool's ViewBox card shows the raw four-number string exactly as written, so you can spot at a glance whether an SVG uses a top-left or centered coordinate convention before reusing its paths elsewhere.

Common Mistakes When Pasting SVG Code

The most frequent parse failure is pasting only the inner shapes, like a lone <path> or <circle> tag, without the wrapping <svg>...</svg> element around it, since a <path> on its own has no root SVG for the browser to render into. A close second is copying from a source that strips or escapes angle brackets, turning <svg> into a literal ampersand-lt-svg string, which looks fine to a human eye but fails the parser silently. If the preview shows the parse-error message, open the source in a plain text editor first and confirm the very first non-whitespace characters are an opening <svg tag (an XML declaration line starting with <?xml is fine before it) and the very last characters are </svg>.

Why Vector Graphics Stay Sharp at Any Size

Raster formats like PNG and JPG store a fixed grid of colored pixels, so enlarging them means stretching existing pixels or guessing new ones, which is why a small photo turns blurry when blown up. SVG instead stores the mathematical description of each shape, a circle's center and radius, a path's control points, a rectangle's corners, and the browser recalculates the actual pixels fresh every time it renders, whether that's on a small phone icon or a building-sized billboard. This is also why SVG files are typically tiny compared to a bitmap of the same visual complexity: a logo that would need a multi-megabyte PNG to stay sharp on a 4K display might be under 5 KB as SVG, since the file only needs to store the shape instructions once, not one value per pixel at every possible resolution.

Frequently Asked Questions

Why does my SVG show no Width or Height?

Some SVGs define their size only through a viewBox attribute and rely on CSS or their container for actual display size. If width/height attributes aren't present in the source code, those fields show as "not set" even though the SVG still renders correctly.

Is it safe to preview an SVG file from an untrusted source here?

This tool renders the SVG directly in your browser to show you a preview, the same way an tag would. As with any SVG viewer, only preview files from sources you trust, since SVG is technically capable of embedding scripts, though this tool does not execute or upload the file anywhere.

What is the difference between an SVG's width/height and its viewBox?

The width and height attributes set the SVG's rendered display size in the page, like any other image. The viewBox defines the internal coordinate system, the region of artwork that gets mapped onto that display size, written as four numbers: min-x, min-y, width, height. Two SVGs can share the same viewBox but display at completely different sizes depending on their width/height, and a well-built responsive SVG often omits width/height entirely so it scales to fill its container while the viewBox still controls its internal proportions.

Why does my downloaded PNG look blurry or the wrong size?

The PNG export reads the SVG's width and height attributes first, falling back to the viewBox's third and fourth numbers, and finally to a 512x512 default if neither is present. If your SVG has no explicit width/height and a small viewBox, like 0 0 24 24 for an icon, the export renders at 24x24 pixels, which looks blurry once scaled up in an image viewer. To get a crisp larger PNG, temporarily add width and height attributes with the pixel size you want directly in the code box before exporting.

Why did the preview say "Could not parse SVG markup"?

This appears when the pasted or uploaded text does not contain a valid <svg>...</svg> root element, for example if you pasted only the inner path data, copied an incomplete snippet, or uploaded a file that was not actually SVG despite its extension. Open the file in a text editor and confirm it starts with an <svg> tag (optionally preceded by an XML declaration or comment) and ends with a matching closing tag.

Can I edit the SVG code and see the preview update?

Yes. The code box is a live editor, not just a display, every keystroke re-parses the markup and redraws the preview along with the Width, Height, ViewBox, and File Size fields. This makes it useful for quick edits, such as changing a fill color, tweaking a stroke width, or adjusting the viewBox to crop or reposition the artwork, without needing a dedicated vector editor.

Why is SVG file size so much smaller than a PNG or JPG of the same image?

SVG stores shapes as mathematical instructions, coordinates, curves, and fill colors, rather than a grid of pixels. A simple logo or icon might need only a few hundred bytes of path data, while a PNG of the same image at any meaningful resolution stores thousands of individual pixel values. This is why the File Size field on a small icon SVG often reads under 1 KB even though the artwork looks sharp at any zoom level, vector data scales with complexity, not with the pixel dimensions it's displayed at.