How to svg viewbox and coordinate system explained
- Step 1Understand the viewport — The SVG viewport is the rendered rectangle defined by the width and height attributes (or CSS). It is the 'window' through which you see the drawing.
- Step 2Understand the viewBox — viewBox='min-x min-y width height' defines a rectangular region in user-coordinate space. The browser maps this region onto the viewport, scaling and translating to fit.
- Step 3Adjust preserveAspectRatio — preserveAspectRatio='xMidYMid meet' (default) keeps the aspect ratio and centres the graphic. Use 'none' to stretch to fill, or 'xMinYMin slice' to crop from the top-left.
Frequently asked questions
What does viewBox='0 0 24 24' mean?+
It means the SVG's internal coordinate space starts at (0,0) and spans 24 user units wide and 24 user units tall. This is the standard for most icon libraries (Heroicons, Lucide, Feather). The icon scales to any rendered size without quality loss.
How do I pan an SVG without JavaScript?+
Change the min-x and min-y values in viewBox. Setting viewBox='100 0 200 200' on a 400×400 drawing shows only the right half, effectively panning right by 100 units.
Can two SVG elements share a coordinate space?+
Yes, by using the same viewBox values on a parent SVG and positioning child elements with x/y attributes. Nested <svg> elements each get their own viewport and viewBox, creating independent coordinate sub-spaces.
Why do my paths shift when I change the viewBox?+
The paths themselves don't move — their coordinates stay the same. Changing viewBox changes which region of coordinate space is visible, so the paths appear to shift relative to the viewport.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.