SVG Colors, Patterns & Gradients

Appendix B. Elements, Attributes, and Style Properties

This guide to SVG paint server elements provides a quick reference to the available attributes, with their default and allowed values.

<linearGradient>

A gradient in which color stops are drawn as parallel lines, extending perpendicularly (in the gradient’s coordinate system) from a gradient vector.

id

the value used to reference this gradient

• same restrictions as for any other element id

x1

horizontal position of the gradient vector’s start point

• a length (in user coordinates or with units) or percentage (of coordinate system width)

• default 0.

y1

vertical position of the gradient vector’s start point

• a length (in user coordinates or with units) or percentage (of coordinate system height)

• default 0.

x2

horizontal position of the gradient vector’s end point

• a length (in user coordinates or with units) or percentage (of coordinate system width)

• default 100%.

y2

vertical position of the gradient vector’s end point

• a length (in user coordinates or with units) or percentage (of coordinate system height)

• default 0.

gradientUnits

the coordinate system to use

• either userSpaceOnUse or objectBoundingBox

• default objectBoundingBox

gradientTransform

transformations to apply to the gradient content, independent of the shape it fills

• a list of whitespace-separated transformation functions: translate(tx,ty), scale(s), scale(sx,sy), rotate(a), rotate(a,cx,cy), skewX(a), and skewY(a)