SVG Viewer
Paste SVG markup to render a live preview and inspect its dimensions, viewBox, element count, and file size — entirely in your browser.
Invalid SVG — check your markup and try again.
What the metadata means
- Width and Height — the intrinsic dimensions declared on the root
<svg>element. Missing values mean the browser will size the SVG based on its container or default to 300×150px. - viewBox — defines the coordinate system of the SVG content. This is what makes SVG scale cleanly at any size. If it is missing, the SVG may not scale as expected.
- Elements — total number of descendant elements inside the SVG. A high count may indicate opportunities for optimisation.
- File size — byte length of the raw SVG markup. Run through the SVG Optimizer to reduce it.
Frequently Asked Questions
What does SVG Viewer show me?+
It renders your SVG markup live in the browser and displays key metadata extracted from the root <svg> element: declared width and height, the viewBox attribute, the total number of child elements, and the raw byte size of the markup.
Why does my SVG appear tiny or huge?+
When an SVG has no explicit width and height attributes, browsers use the viewBox dimensions as intrinsic size. If the viewBox is large (e.g. 0 0 1000 1000), the SVG expands to fill its container. If it's missing entirely, browsers may use a default 300×150px. The metadata panel shows what your SVG declares so you can spot missing attributes.
What does element count include?+
It counts every descendant element inside the root <svg> tag — shapes, groups, defs, paths, symbols, and so on. It does not count the root element itself.
Is my SVG uploaded to a server?+
No. Rendering and analysis happen entirely in your browser. Your SVG markup is never sent anywhere.
Related Tools
How to use
- Paste SVG markup into the editor — the preview updates instantly.
- Toggle the background to check transparency and contrast.
- Use the metadata panel to inspect dimensions, viewBox, and file size.