SVG Viewport vs User Coordinates
The viewBox creates a mapping between the SVG's physical viewport size and the user coordinate system your shapes are drawn in.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Two Coordinate Systems, One Mapping
An SVG has a viewport (its physical rendered size in the page, set by width and height) and a user coordinate system (the coordinate space shapes are actually drawn in, defined by the viewBox), and the viewBox establishes the mapping between them — for example, a 100x100 viewBox rendered in a 400px viewport means each user unit equals 4 physical pixels.
- The viewport is the SVG's physical rendered size set by width and height
- The user coordinate system is the space shapes are drawn in, set by viewBox
- The viewBox establishes the scaling mapping between the two systems
Why This Distinction Matters in Practice
Understanding this mapping is essential for responsive SVG (where the viewport size changes but user coordinates stay fixed), for accurate coordinate conversion in interactive SVG, and for reasoning about why a shape drawn at a specific user coordinate appears at a different physical pixel position depending on the current viewport size.
- Essential for responsive SVG where viewport changes but user coordinates stay fixed
- Underpins accurate coordinate conversion in interactive SVG applications
- Explains why user coordinates map to different pixels at different viewport sizes
Frequently Asked Questions
If I don't set a viewBox, are viewport and user coordinates the same?
Without a viewBox, user coordinates map 1:1 to the viewport pixels, so a shape at x=50 sits at 50 physical pixels — the viewBox is what introduces a scaling difference between the two systems.
How does preserveAspectRatio interact with viewport and user coordinates?
preserveAspectRatio controls how the user coordinate system is scaled and aligned within the viewport when their aspect ratios differ, determining whether the content is letterboxed, cropped, or stretched to fit.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG