How SVG Coordinate System Works — User Units, Transforms & Nesting
SVG uses a user unit coordinate system defined by viewBox — understand how transforms, nested SVGs, and units interact for precise SVG control.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG User Units and viewBox
SVG coordinates are in 'user units' — unitless numbers that map to the display space defined by `viewBox`. A `viewBox='0 0 100 100'` means the SVG coordinate space is 100×100 units, regardless of the SVG's CSS pixel size.
- viewBox='0 0 100 100': coordinates from (0,0) to (100,100)
- An element at x=50 is horizontally centered in the viewBox
- 1 user unit = viewport_width / viewBox_width pixels
Transform and Nested SVG Coordinate Contexts
Each `transform` attribute creates a new coordinate context. A `translate(10,20)` shifts the origin — all coordinates inside that transformed group are relative to the new origin. Nested `<svg>` elements create their own independent coordinate system with their own viewBox.
- transform='translate(10,20)': shifts origin by (10,20)
- Nested <svg> has its own independent coordinate system
- Coordinates inside transformed group are relative to transform
Frequently Asked Questions
What does 1 SVG user unit equal in pixels?
1 user unit = (viewport size in CSS pixels) / (viewBox size in units). For a 500px wide SVG with viewBox='0 0 100 100', 1 user unit = 5 CSS pixels.
Why do my SVG coordinates look wrong after applying a transform?
Transforms change the coordinate origin for child elements. After translate(50,50), a child at x=0 y=0 is at screen position (50,50). Coordinates inside a transformed group are always relative to that transform's new origin.
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