SVG Viewport and Coordinate Systems Explained

Scalable Vector Graphics (SVG) rely on a dual-coordinate architecture consisting of the viewport and the viewBox to render scalable, resolution-independent graphics. This article explains how the SVG viewport establishes the visible display area, how the user coordinate system defines internal geometry, and how units and transformations determine the rendering and scaling of vector elements.

The Viewport: The Outer Canvas

The SVG viewport is the visible rectangular window through which an SVG image is viewed. It is defined on the root <svg> element using the width and height attributes, or via CSS.

<svg width="500" height="300">
  <!-- Content goes here -->
</svg>

By default, the initial viewport coordinate system sets: * Origin (0,0): The top-left corner of the viewport. * Positive X-axis: Extends horizontally to the right. * Positive Y-axis: Extends vertically downward.

If no unit is specified for the viewport’s width and height, values default to standard screen pixels (px).

The viewBox: The User Coordinate System

While the viewport defines the physical dimensions on the screen, the viewBox attribute defines the internal “user coordinate system” (or virtual canvas) where elements are positioned and drawn.

The viewBox syntax accepts four comma- or space-separated values:

<svg width="500" height="300" viewBox="0 0 1000 600">
  <circle cx="500" cy="300" r="100" fill="blue" />
</svg>

• min-x: The starting X-coordinate for the upper-left corner inside the SVG.
• min-y: The starting Y-coordinate for the upper-left corner inside the SVG.
• width: The width of the user coordinate system.
• height: The height of the user coordinate system.

In this example, the internal graphics are mapped to a 1000×600 grid, which is automatically scaled down by half to fit into the 500×300 pixel viewport.

Mapping Coordinates with preserveAspectRatio

When the aspect ratio of the viewBox does not match the aspect ratio of the viewport, the preserveAspectRatio attribute dictates how the user coordinates scale:

• meet (default): Scales the entire viewBox to fit completely inside the viewport while preserving the aspect ratio (similar to CSS object-fit: contain).
• slice: Scales the viewBox to completely cover the viewport, clipping any overflow (similar to CSS object-fit: cover).
• none: Distorts and stretches the graphic to fill the viewport dimensions entirely.

Alignment values (such as xMidYMid, xMinYMin, xMaxYMax) specify how the coordinate space aligns inside the viewport when empty space exists.

Units inside SVG

SVG coordinates can be specified with or without explicit units:

• Unitless values: Highly recommended. Numbers without units (e.g., cx="50") resolve directly to “user units” within the active viewBox coordinate space.
• Absolute units: Units such as px, cm, mm, in, pt, and pc are tied to real-world measurements or CSS pixels, overriding proportional scaling relative to the viewBox.
• Percentages (%): Resolved relative to the current viewport dimensions. An element with width="50%" occupies half the width of the active viewport.

Nested Coordinate Systems and Transformations

Every SVG element can establish its own local coordinate system. Applying transformation attributes (translate, scale, rotate, skewX, skewY) modifies the coordinate grid for the target element and all of its children.

Nested <svg> elements or <g> groups with transforms shift the origin (0,0) and orientation, allowing complex components to be authored in isolated, self-contained coordinate systems before being composed into the root viewport.