Use this vscode view svg code to render any SVG and inspect its structure. See dimensions, viewBox values, and element hierarchy at a glance.
What the viewer shows
Paste any SVG code or drag a file into the viewer to see it rendered at actual size. Below the preview, the viewer displays the viewBox, width, height, and a tree of all elements in the SVG.
Inspecting SVG structure
The element tree shows every node in the SVG document. Click on an element to highlight it in the preview. This makes it easy to identify which path or shape corresponds to which part of the graphic.
Dimensions and viewBox
The viewBox attribute defines the coordinate system of an SVG. A viewBox of 0 0 24 24 means the graphic occupies a 24 unit square. Understanding viewBox helps you resize SVGs correctly without distorting the content.
Try it in the browser
Paste any SVG into our free tools to see how it works.