userSpaceOnUse

UserSpaceOnUse is a keyword used in SVG to specify the coordinate system for certain painting and filtering attributes. It appears as a value for coordinate-system related attributes such as gradientUnits, patternUnits, and filter primitiveUnits. When set to userSpaceOnUse, coordinates are interpreted in the SVG’s user coordinate system—the global coordinate system established by the root element—rather than being relative to the bounding box of the element that references the gradient, pattern, or filter.

In practical terms, for gradients, using userSpaceOnUse means that the gradient’s coordinates (for linearGradient: x1, y1, x2, y2; for radialGradient: cx, cy, r) are fixed in the overall user coordinate space. The gradient does not automatically scale with the element it fills, so it can align with other page elements or a global grid. For patterns, patternUnits="userSpaceOnUse" defines the pattern tile’s size and position in the same user space, which can help create consistent tiling across multiple elements. For filter primitives, primitiveUnits="userSpaceOnUse" makes attributes such as x, y, width, and height of filter primitives reference the user space as well.

The default behavior for these attributes is typically objectBoundingBox, where coordinates are normalized to the element’s bounding box and scale with the element. Using userSpaceOnUse is useful when a gradient, pattern, or filter needs to align with a broader canvas or a fixed coordinate reference rather than with a single element’s dimensions.