SVG Viewer
- 0 0 120 120
- viewBox
- 3
- Elements
- 0.2 KB
- Size
The SVG viewer renders markup or a file at any zoom against four backgrounds, and reports the viewBox and element count. The transparency checker is the default background because an SVG with no fill looks identical to one with a white fill against a white page.
How it works
The markup is rendered inline rather than as an image file, so it displays exactly as it would when embedded in a page, including any CSS inside the SVG, which an img tag would apply but a background-image would not.
- The viewBox determines how the artwork scales. An SVG without one has a fixed intrinsic size and will not scale cleanly.
- The element count is a rough complexity measure: hand-drawn icons run to tens, exported illustrations to thousands.
- Zoom from 25 to 400 percent, which is where scaling artefacts in a badly built file become visible.
- The brand-colour background reveals shapes filled with white that would be invisible on a light page.
Examples
A simple icon
SVG
A circle with a tick path
Result
viewBox 0 0 120 120 · 3 elements · 0.2 KB
Three elements is typical for a hand-written icon. A file with hundreds usually came out of a design tool and can be simplified.
A file with no viewBox
SVG
Markup without a viewBox attribute
Result
viewBox: not set
Without one, the SVG cannot scale to its container and will render at whatever intrinsic size the browser picks, usually 300 by 150.
Frequently asked questions
Why does my SVG look blank?
Most often the fill is white and so is the background, or the viewBox does not contain the artwork. Switch the background to the brand colour to check the first, and look at the viewBox values against the coordinates in your paths for the second.
Is it safe to paste any SVG here?
The markup is rendered inline, which means any script inside it would run in the page. Only paste SVG you produced or trust. The same caution applies to uploading an untrusted SVG to any site that renders it inline.
Why does the viewBox matter so much?
Because it defines the coordinate system the artwork is drawn in and lets the SVG scale to any size. Without one the file has a fixed intrinsic size, will not fill its container, and loses the main advantage of being a vector.
What element count is too high?
There is no hard limit, but an icon with more than about a hundred elements is usually an export that has not been simplified. Design tools routinely emit thousands of tiny paths where a handful would do, which makes the file large and slow to render.