SVG Coordinate Systems, ViewBox & Units Glossary: 40+ Terms Explained

The finite rectangular layout window allocated to the SVG element on the web page. Established by CSS width/height or SVG presentation attributes. Serves as the clipping and projection frame for all vector content.

Defines the virtual camera aperture and internal user coordinate system. Specifies the rectangular bounds of vector space that the browser maps onto the external viewport.

Controls how the browser projects the internal user coordinate system into an external viewport with a different aspect ratio. Dictates whether vectors scale uniformly or stretch non-uniformly.

Scales the viewBox uniformly until both dimensions fit completely inside the viewport. Equivalent to CSS object-fit: contain. Never clips graphic content, but may create pillarbox or letterbox margins.

Scales the viewBox uniformly until it completely covers the viewport container. Equivalent to CSS object-fit: cover. Fills the entire viewport with zero dead margin, but slices off vector parts extending past edges.

Disables uniform aspect ratio preservation completely. Distorts vector geometry non-uniformly so the viewBox coordinates stretch to match the exact width and height of the host viewport.

Aligns the minimum X coordinate of the viewBox with the left viewport edge, and the minimum Y with the top edge. Anchors content to top-left during aspect ratio scaling.

Horizontally centers the viewBox along the X-axis while anchoring its minimum Y edge flush with the top of the viewport.

Aligns the maximum X boundary with the right edge of the viewport, anchored to the top.

Aligns the left edge flush with the left viewport boundary while vertically centering the viewBox along the Y-axis.

The W3C default alignment parameter. Centers the viewBox both horizontally and vertically inside the viewport space.

Aligns the right boundary flush with the right viewport edge while vertically centering the viewBox along the Y-axis.

Anchors the viewBox flush against the bottom-left corner of the viewport frame.

Horizontally centers the viewBox along the X-axis while anchoring its bottom edge to the bottom of the viewport.

Anchors the viewBox flush against the bottom-right corner of the viewport frame.

The infinite 2D Cartesian coordinate space in which path coordinates and shapes are defined. Positioned relative to an origin (0,0) with positive X extending right and positive Y extending downward.

The physical pixel coordinate space established by the viewport on the rendered webpage. Its origin (0,0) sits at the top-left corner of the SVG container element.

The user coordinate system when no viewBox or transforms are active, where one user unit equals one CSS pixel on the host display.

The pixel coordinate system returned by mouse and pointer events (e.clientX, e.clientY). Mapped into SVG user space via getScreenCTM().inverse().

The active local coordinate system resulting from cumulative affine transformations applied by parent <g>, <svg>, or <use> elements.

A localized user space whose axes have been rotated, translated, or sheared. Child elements position themselves relative to the newly modified axes rather than the root origin.

Specifies that coordinates and dimensions within paint servers, masks, or clip paths reference the current user coordinate system in absolute units (pixels), maintaining consistent scale regardless of target element dimensions.

The default mode where coordinates are fractions of the bounding box of the element being painted. x1="0" x2="1" spans 100% of the element width.

patternUnits governs whether the repeating tile box scales with the element or in user pixels. patternContentUnits governs whether shapes inside the tile calculate in user pixels or fractions.

maskUnits defines the coordinate system for the clipping bounds of the <mask> element. maskContentUnits dictates whether the inner luminance shapes calculate relative to the masked element.

Specifies whether vector paths inside a <clipPath> evaluate in userSpaceOnUse (fixed pixels) or objectBoundingBox (0-to-1 normalized fractions).

Controls whether linear/radial gradient vectors (x1, y1, x2, y2) are resolved in userSpaceOnUse or objectBoundingBox space.

Numbers declared without units in SVG attributes (e.g. width="24", r="5"). Exactly equals 1 user space coordinate, mapping to 1 CSS pixel before viewBox transformations.

The standard CSS pixel unit defined as 1/96th of an inch. In SVG, appending px behaves identically to unitless user units in the absence of CSS font scaling.

Physical measurement units converted to user units via standard CSS ratios: 1in = 96px, 1pt = 1.333px, 1pc = 16px, 1cm = 37.795px, 1mm = 3.7795px.

Dynamic units computed from the computed font metrics of the SVG element. Allows vector icons to scale fluidly with neighboring typography when width="1em" height="1em" is set.

Lengths resolved as percentages against the width (for X coordinates), height (for Y coordinates), or normalized diagonal length of the nearest ancestor SVG viewport.

A vector styling property that instructs the browser GPU to calculate stroke thickness after all viewBox and CSS transforms, keeping line caliper locked to display pixels regardless of zoom.

The active 3x3 affine matrix transforming 2D coordinates from current user space into the nearest SVG viewport coordinate system.

The DOM method returning the transformation matrix that maps coordinates from local user space directly to the client screen display pixel grid.

The standard JavaScript API representing affine geometric transformation matrices. Provides multiplication, inversion, translation, and rotation methods for vector projection.

Compact matrix notation representing [scaleX, skewY, skewX, scaleY, translateX, translateY]. Transforms any vector coordinate (x, y) via x' = ax + cy + e, y' = bx + dy + f.

In native SVG specification space, transform-origin defaults to (0,0) (top-left of the canvas), unlike HTML elements which default to (50%, 50%) (center of bounding box). Modern CSS allows transform-box: fill-box; transform-origin: center; to center rotations.

DOM properties on the root SVGSVGElement representing the user-agent panning translation point and magnification scale factor applied to the entire graphic.

An <svg> element nested inside another <svg> establishes its own local viewport, with an independent coordinate origin, width, height, and viewBox projection.

When a <symbol> with its own viewBox is referenced via <use width="X" height="Y">, the browser creates a synthetic nested viewport, mapping the symbol's viewBox onto the use dimensions.

Controls whether graphics rendered outside the rectangular viewport limits are clipped (default hidden) or allowed to spill into neighboring document layout (overflow: visible).

A deprecated CSS clipping property formerly used by browser engines to restrict SVG viewport visibility bounds, now superseded by modern clip-path.

An SVG document-level presentation attribute specifying whether the browser should permit user-initiated interactive panning and zooming controls.