SVG linearGradient Coordinate Attributes

In Scalable Vector Graphics (SVG), the direction and length of a linear gradient are determined by a linear gradient vector. This article explains the exact attributes used to define the starting and ending coordinates of an SVG <linearGradient> element—specifically x1, y1, x2, and y2—and how they dictate the angle, position, and transition of the gradient fill across a shape.

The Four Coordinate Attributes

The starting and ending points of the gradient vector are controlled by four primary attributes on the <linearGradient> element:

By default, if these attributes are omitted, SVG sets the vector to x1="0%", y1="0%", x2="100%", and y2="0%", producing a horizontal gradient that transitions from left to right.

Coordinate Systems: gradientUnits

The values assigned to x1, y1, x2, and y2 are interpreted according to the gradientUnits attribute, which accepts two values:

  1. objectBoundingBox (Default): Coordinates are expressed as percentages (such as 0% to 100%) or decimal values (from 0.0 to 1.0) relative to the bounding box of the element using the gradient. For example, x1="0%" represents the far-left edge of the element, while x2="100%" represents the far-right edge.
  2. userSpaceOnUse: Coordinates represent absolute coordinate units within the current SVG viewport space (such as pixels). In this mode, coordinates do not automatically scale with the shape’s size.

Common Vector Configurations

Changing the combination of the four vector attributes changes the gradient’s direction:

By adjusting these four attributes, you have complete control over the trajectory, angle, and spread of any SVG linear gradient.