Elements: Paint servers

Paint servers are elements that define a color or a pattern that can be used to fill or stroke shapes. The following paint servers are supported:

• "<linearGradient>"
• "<radialGradient>"
• "<pattern>"
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html

"<linearGradient>"

Defines the paint server for a linear gradients.

• DOM object: SVGLinearGradientElement
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#LinearGradients

These elements are typically placed within a <defs> element, and then referenced by id from a fill or stroke attribute.

<linearGradient id="MyGradient">
  <stop offset="0%" stop-color="blue" />
  <stop offset="100%" stop-color="yellow" />
</linearGradient>

To reference it with a fill:

<rect fill="url(#MyGradient)" width="300" height="300" />

Valid child elements: "<stop>"

See also

"<radialGradient>", "<stop>"

Attribute	Default	Description
x1	0%	Start X coordinate.
y1	0%	Start Y coordinate.
x2	100%	End X coordinate.
y2	100%	End Y coordinate.
gradientUnits	objectBoundingBox	The coordinate system for the gradient, either userSpaceOnUse or objectBoundingBox.
gradientTransform	(none)	A transform to apply to the gradient.
spreadMethod	pad	How to handle colors outside the gradient. Either pad, reflect, or repeat.
href	(none)	A URL reference to a template gradient element, which is then used as a template for this gradient. Example: <linearGradient id="MyGradient" href="#MyGradient2" />

"<pattern>"

Defines a paint server containing a repeated pattern, which is tiled to fill the area.

• DOM object: SVGPatternElement
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#Patterns

These elements are typically placed within a "<defs>" element, and then referenced by id from a fill or stroke attribute.

<pattern id="MyPattern" viewbox="0,0,10,10" width="15%" height="15%">
  <circle cx="5" cy="5" r="5" fill="red" />
</pattern>

To reference it with a fill:

<rect fill="url(#MyPattern)" width="300" height="300" />

Attribute	Default	Description
viewBox	(none)	A list of four numbers (min-x, min-y, width, height) separated by whitespace and/or a comma, that specify a rectangle in userspace that should be mapped to the SVG viewport bounds established by the pattern.
preserveAspectRatio	xMidYMid meet	How to scale the viewport to fit the content. Only applies is viewBox is specified.
x	0	Defines the top-left X coordinate of a rectangle indicating how pattern tiles are placed and spread. The coordinate system is determined by the combination of the patternUnits and patternTransform attributes.
y	0	Defines the top-left Y coordinate of a rectangle indicating how pattern tiles are placed and spread. The coordinate system is determined by the combination of the patternUnits and patternTransform attributes.
width	0	Defines the width of a rectangle indicating how pattern tiles are placed and spread. The coordinate system is determined by the combination of the patternUnits and patternTransform attributes.
height	0	Defines the height of a rectangle indicating how pattern tiles are placed and spread. The coordinate system is determined by the combination of the patternUnits and patternTransform attributes.
patternUnits	objectBoundingBox	Defines the coordinate system for attributes x, y, width, and height.
patternContentUnits	userSpaceOnUse	Defines the coordinate system for the contents of the pattern. Note that this attribute has no effect if the viewBox attribute is specified.
patternTransform	identity	Optional transformation from the pattern coordinate system onto the target coordinate system, allowing things like skewing the pattern tiles.
href	(none)	Reference to another pattern element to use as a template.

"<radialGradient>"

Defines the paint server for a radial gradients.

• DOM object: SVGRadialGradientElement
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#RadialGradients

These elements are typically placed within a "<defs>" element, and then referenced by id from a fill or stroke attribute.

<radialGradient id="MyGradient">
  <stop offset="0%" stop-color="blue" />
  <stop offset="100%" stop-color="yellow" />
</radialGradient>

To reference it with a fill:

<rect fill="url(#MyGradient)" width="300" height="300" />

Valid child elements: "<stop>"

See also

"<linearGradient>", "<stop>"

Attribute	Default	Description
cx	50%	Center X coordinate, for the outer circle.
cy	50%	Center Y coordinate, for the outer circle.
r	50%	Radius of the outer circle.
fx	cx	Focal point X coordinate.
fy	cy	Focal point Y coordinate.

| fr | 0 | Focal point radius. | * | gradientUnits | objectBoundingBox | The coordinate system for the gradient, either userSpaceOnUse or objectBoundingBox. | | gradientTransform | (none) | A transform to apply to the gradient. | | spreadMethod | pad | How to handle colors outside the gradient. Either pad, reflect, or repeat. | | href | (none) | A URL reference to a template gradient element, which is then used as a template for this gradient. Example: <radialGradient id="MyGradient" href="#MyGradient2" /> |

"<stop>"

Defines a color stop for a gradient. This is a child element of "<linearGradient>" and "<radialGradient>".

• DOM object: SVGStopElement
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#StopElement

Each stop element defines an offset and a color. The offset is a percentage of the distance between the start and end of the gradient.

<linearGradient id="MyGradient">
  <stop offset="0%" stop-color="blue" />
  <stop offset="100%" stop-color="yellow" />
</linearGradient>