previous next contents elements attributes properties index

14 January 2003

13 Gradients and Patterns

13.

13.1 Introduction
13.2 Gradients
13.3 Patterns
13.4

Gradient Module

DOM interfaces
- 13.

5 Pattern Module

13.6 DOM interfaces

13.1 Introduction

With SVG, you can fill (i.e., paint the interior) or stroke (i.e., paint the outline) of shapes and text using one of the following:

color (using <color> or the 'solidColor' element)
gradients (linear or radial)
patterns (vector or image, possibly tiled)

SVG uses the general notion of a paint server. Gradients and patterns are just specific types of built-in paint servers. The 'solidColor' element is another built-in paint server, described in Color.

Paint servers are referenced using a URI reference on a 'fill' or 'stroke' property.

13.2 Gradients

13.2.1 Introduction

Gradients consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions along the same vector to other colors. SVG provides for two types of gradients, : linear gradients and radial gradients.

Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.

13.2.2 Linear gradients

Linear gradients are defined by a 'linearGradient' element.


<!ENTITY % SVG.linearGradient.extra.content "" >
<!ENTITY % SVG.linearGradient.element "INCLUDE" >
<![%SVG.linearGradient.element;[
<!ENTITY % SVG.linearGradient.content
    "(( %SVG.Description.class; )*, ( %SVG.stop.qname; | %SVG.animate.qname;
      | %SVG.set.qname; | %SVG.animateTransform.qname;
        %SVG.linearGradient.extra.content; )*)"
>
<!ELEMENT %SVG.linearGradient.qname; %SVG.linearG\
radient.content; >
<!-- end of SVG.linearGradient.element -->]]>
<!ENTITY % SVG.linearGradient.attlist "INCLUDE" >
<![%SVG.linearGradient.attlist;[
<!ATTLIST %SVG.linearGradient.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    %SVG.XLink.attrib;
    %SVG.External.attrib;
    x1 %Coordinate.datatype; #IMPLIED
    y1 %Coordinate.datatype; #IMPLIED
    x2 %Coordinate.datatype; #IMPLIED
    y2 %Coordinate.datatype; #IMPLIED
    gradientUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    gradientTransform %TransformList.datatype; #IMPLIED
    spreadMethod ( pad | reflect | repeat ) #IMPLIED
>

'linearGradient'

Categories:

Gradient element

Content model:

Any number of the following elements, in any order:

descriptive elements — 'desc', 'title', 'metadata'
'animate'
'animateTransform'
'set'
'stop'

Attributes:

DOM Interfaces:

SVGLinearGradientElement

Attribute definitions:

gradientUnits = "userSpaceOnUse | objectBoundingBox": Defines the coordinate system for attributes 'x1', 'y1', 'x2, ' and 'y2'.
If gradientUnits="userSpaceOnUse", 'x1', 'y1', 'x2, ' and 'y2' represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a 'fill' or 'stroke' property) and then applying the transform specified by attribute 'gradientTransform'.
If gradientUnits="objectBoundingBox", the user coordinate system for attributes 'x1', 'y1', 'x2, ' and 'y2' is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute 'gradientTransform'.
When gradientUnits="objectBoundingBox" and 'gradientTransform' is the identity matrix, the stripes of the linear gradient are perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the stripes that are conceptually perpendicular to the gradient vector within object bounding box space will render non-perpendicular relative to the gradient vector in user space due to application of the non-uniform scaling transformation from bounding box space to user space.
If attribute 'gradientUnits' is not specified, then the effect is as if a value of 'objectBoundingBox' were specified.
Animatable: yes.
gradientTransform = "<transform-list>": Contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
If attribute 'gradientTransform' is not specified, then the effect is as if an identity transform were specified.
Animatable: yes.
x1 = "<coordinate>": 'x1', 'y1', 'x2, ' and 'y2' define a gradient vector for the linear gradient. This gradient vector provides starting and ending points onto which the gradient stops are mapped. The values of 'x1', 'y1', 'x2, ' and 'y2' can be either numbers or percentages.
If the attribute is not specified, the effect is as if a value of "'0%" ' were specified.
Animatable: yes.
y1 = "<coordinate>": See 'x1'.
If the attribute is not specified, the effect is as if a value of "'0%" ' were specified.
Animatable: yes.
x2 = "<coordinate>": See 'x1'.
If the attribute is not specified, the effect is as if a value of "'100%" ' were specified.
Animatable: yes.
y2 = "<coordinate>": See 'x1'.
If the attribute is not specified, the effect is as if a value of "'0%" ' were specified.
Animatable: yes.
spreadMethod = "pad | reflect | repeat": Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. Possible values are: 'pad', which says to use the terminal colors of the gradient to fill the remainder rspan class='attr-value'ainder of the target region, 'reflect', which says to reflect the gradient pattern start-to-end, end-to-start, start-to-end, etc. continuously until the target rectangle is filled, and repeat, which says to repeat the gradient pattern start-to-end, start-to-end, start-to-end, etc. continuously until the target region is filled.
If the attribute is not specified, the effect is as if a value of "'pad" ' were specified.
Animatable: yes.
xlink:href = "<uri>": A URI reference to a different 'linearGradient' or 'radialGradient' element within the current SVG document fragment. Any 'linearGradient' attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no defined gradient stops, and the referenced element does (possibly due to its own 'xlink:href' attribute), then this element inherits the gradient stop from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own 'xlink:href' attribute, then the current element can inherit those attributes or gradient stops.
Animatable: yes.

Percentages are allowed for 'x1', 'y1', 'x2, ' and 'y2'. For gradientUnits="userSpaceOnUse", percentages represent values relative to the current viewport. For gradientUnits="objectBoundingBox", percentages represent values relative to the bounding box for the object.

If 'x1' = 'x2' and 'y1' = 'y2', then the area to be painted will be painted as a single color using the color and opacity of the last gradient stop.

Properties inherit into the 'linearGradient' element from its ancestors; properties do not inherit from the element referencing the 'linearGradient' element.

'linearGradient' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'linearGradient' element; thus, 'linearGradient' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'linearGradient' elements are available for referencing even when the 'display' property on the 'linearGradient' element or any of its ancestors is set to none.

Example lingrad01 shows how to fill a rectangle by referencing a linear gradient paint server.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
     xmlns="http://www.w3.org/2000/svg"

version="1.1"

>
  <desc>Example lingrad01 - fill a rectangle using a 
           linear gradient paint server</desc>
  <g>
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
      </linearGradient>
    </defs>

    <!-- Outline the drawing area in blue -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>

    <!-- The rectangle is filled using a linear gradient paint server -->
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>

Example lingrad01

View this example as SVG (SVG-enabled browsers only)

13.2.3 Radial gradients

Radial gradients are defined by a 'radialGradient' element.


<!ENTITY % SVG.radialGradient.extra.content "" >
<!ENTITY % SVG.radialGradient.element "INCLUDE" >
<![%SVG.radialGradient.element;[
<!ENTITY % SVG.radialGradient.content
    "(( %SVG.Description.class; )*, ( %SVG.stop.qname; | %SVG.animate.qname;
      | %SVG.set.qname; | %SVG.animateTransform.qname;
        %SVG.radialGradient.extra.content; )*)"
>
<!ELEMENT %SVG.radialGradient.qname; %SVG.radialG\
radient.content; >
<!-- end of SVG.radialGradient.element -->]]>
<!ENTITY % SVG.radialGradient.attlist "INCLUDE" >
<![%SVG.radialGradient.attlist;[
<!ATTLIST %SVG.radialGradient.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    %SVG.XLink.attrib;
    %SVG.External.attrib;
    cx %Coordinate.datatype; #IMPLIED
    cy %Coordinate.datatype; #IMPLIED
    r %Length.datatype; #IMPLIED
    fx %Coordinate.datatype; #IMPLIED
    fy %Coordinate.datatype; #IMPLIED
    gradientUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    gradientTransform %TransformList.datatype; #IMPLIED
    spreadMethod ( pad | reflect | repeat ) #IMPLIED
>

'radialGradient'

Categories:

Gradient element

Content model:

Any number of the following elements, in any order:

descriptive elements — 'desc', 'title', 'metadata'
'animate'
'animateTransform'
'set'
'stop'

Attributes:

DOM Interfaces:

SVGRadialGradientElement

Attribute definitions:

gradientUnits = "userSpaceOnUse | objectBoundingBox": Defines the coordinate system for attributes 'cx', 'cy', 'r', 'fx, ' and 'fy'.
If gradientUnits="userSpaceOnUse", 'cx', 'cy', 'r', 'fx, ' and 'fy' represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a 'fill' or 'stroke' property) and then applying the transform specified by attribute 'gradientTransform'.
If gradientUnits="objectBoundingBox", the user coordinate system for attributes 'cx', 'cy', 'r', 'fx, ' and 'fy' is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute 'gradientTransform'.
When gradientUnits="objectBoundingBox" and 'gradientTransform' is the identity matrix, then the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the non-uniform scaling transformation from bounding box space to user space.
If attribute 'gradientUnits' is not specified, then the effect is as if a value of 'objectBoundingBox' were specified.
Animatable: yes.
gradientTransform = "<transform-list>": Contains the definitions of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
If attribute 'gradientTransform' is not specified, then the effect is as if an identity transform were specified.
Animatable: yes.
cx = "<coordinate>": 'cx', 'cy, ' and 'r' define the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.
If the attribute is not specified, the effect is as if a value of "'50%" ' were specified.
Animatable: yes.
cy = "<coordinate>": See 'cx'.
If the attribute is not specified, the effect is as if a value of "'50%" ' were specified.
Animatable: yes.
r = "<length>": See 'cx'.
A negative value is an error (see Error processing). A value of zero will cause the area to be painted as a single color using the color and opacity of the last gradient stop.
If the attribute is not specified, the effect is as if a value of "'50%" ' were specified.
Animatable: yes.
fx = "<coordinate>": 'fx, ' and 'fy' define the focal point for the radial gradient. The gradient will be drawn such that the 0% gradient stop is mapped to (fx, fy).
If attribute 'fx' is not specified, 'fx' will coincide with 'cx'.
Animatable: yes.
fy = "<coordinate>": See 'fx'.
If attribute 'fy' is not specified, 'fy' will coincide with 'cy'.
Animatable: yes.
spreadMethod = "pad | reflect | repeat": Indicates what happens if the gradient starts or ends inside the bounds of the object(s) being painted by the gradient. Has the same values and meanings as the 'spreadMethod' attribute on 'linearGradient' element.
Animatable: yes.
xlink:href = "<uri>": A URI reference to a different 'linearGradient' or 'radialGradient' element within the current SVG document fragment. Any 'radialGradient' attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no defined gradient stops, and the referenced element does (possibly due to its own 'xlink:href' attribute), then this element inherits the gradient stop from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own 'xlink:href' attribute, then the current element can inherit those attributes or gradient stops.
Animatable: yes.

Percentages are allowed for attributes 'cx', 'cy', 'r', 'fx' and 'fy'. For gradientUnits="userSpaceOnUse", percentages represent values relative to the current viewport. For gradientUnits="objectBoundingBox", percentages represent values relative to the bounding box for the object.

If the point defined by 'fx' and 'fy' lies outside the circle defined by 'cx', 'cy' and 'r', then the user agent shall set the focal point to the intersection of the line from ('cx', 'cy') to ('fx', 'fy') with the circle defined by 'cx', 'cy' and 'r'.

Properties inherit into the 'radialGradient' element from its ancestors; properties do not inherit from the element referencing the 'radialGradient' element.

'radialGradient' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'radialGradient' element; thus, 'radialGradient' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'radialGradient' elements are available for referencing even when the 'display' property on the 'radialGradient' element or any of its ancestors is set to none.

Example radgrad01 shows how to fill a rectangle by referencing a radial gradient paint server.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
     xmlns="http://www.w3.org/2000/svg"

version="1.1"

>
  <desc>Example radgrad01 - fill a rectangle by referencing a 
           radial gradient paint server</desc>
  <g>
    <defs>
      <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
                      cx="400" cy="200" r="300" fx="400" fy="200">
        <stop offset="0%" stop-color="red" />
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="red" />
      </radialGradient>
    </defs>

    <!-- Outline the drawing area in blue -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>

    <!-- The rectangle is filled using a radial gradient paint server -->
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>

Example radgrad01

View this example as SVG (SVG-enabled browsers only)

13.2.4 Gradient stops

The ramp of colors to use on a gradient is defined by the 'stop' elements that are child elements to either the 'linearGradient' element or the 'radialGradient' element.


<!ENTITY % SVG.stop.extra.content "" >
<!ENTITY % SVG.stop.element "INCLUDE" >
<![%SVG.stop.element;[
<!ENTITY % SVG.stop.content
    "( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
       %SVG.stop.extra.content; )*"
>
<!ELEMENT %SVG.stop.qname; %SVG.stop.content; >
<!-- end of SVG.stop.element -->]]>
<!ENTITY % SVG.stop.attlist "INCLUDE" >
<![%SVG.stop.attlist;[
<!ATTLIST %SVG.stop.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    offset %NumberOrPercentage.datatype; #REQUIRED
>

'stop'

Categories:

None

Content model:

Any number of the following elements, in any order:

Attributes:

DOM Interfaces:

SVGStopElement

Attribute definitions:

offset = "<number> | <percentage>": The 'offset' attribute is either a <number> (usually ranging from 0 to 1) or a <percentage> (usually ranging from 0% to 100%) which indicates where the gradient stop is placed. For linear gradients, the 'offset' attribute represents a location along the gradient vector. For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.
Animatable: yes.

The 'stop-color' property indicates what color to use at that gradient stop. The keyword currentColor and ICC colors can be specified in the same manner as within a <paint> specification for the 'fill' and 'stroke' properties.

'stop-color'

Value:	currentColor \| <color> [icc-color(<name>[,<icccolorvalue>]*)] \| inherit
Initial:	black
Applies to:	'stop' elements
Inherited:	no
Percentages:	N/A
Media:	visual
Animatable:	yes

The 'stop-opacity' property defines the opacity of a given gradient stop.

'stop-opacity'

Value:	<opacity-value> \| inherit
Initial:	1
Applies to:	'stop' elements
Inherited:	no
Percentages:	N/A
Media:	visual
Animatable:	yes

Some notes on gradients:

Gradient offset values less than 0 (or less than 0%) are rounded up to 0%. Gradient offset values greater than 1 (or greater than 100%) are rounded down to 100%.
It is necessary that at least two stops defined to have a gradient effect. If no stops are defined, then painting shall occur as if 'none' were specified as the paint style. If one stop is defined, then paint with the solid color fill using the color defined for that gradient stop.
Each gradient offset value is required to be equal to or greater than the previous gradient stop's offset value. If a given gradient stop's offset value is not equal to or greater than all previous offset values, then the offset value is adjusted to be equal to the largest of all previous offset values.
If two gradient stops have the same offset value, then the latter gradient stop controls the color value at the overlap point. In particular:
```
<stop offset="0" stop-color="white"/>
<stop offset=".2" stop-color="red"/>
<stop offset=".2" stop-color="blue"/>
<stop offset="1" stop-color="black"/>
```
will have approximately the same effect as:
```
<stop offset="0" stop-color="white"/>
<stop offset=".1999999999" stop-color="red"/>
<stop offset=".2" stop-color="blue"/>
<stop offset="1" stop-color="black"/>
```
which is a gradient that goes smoothly from white to red, then abruptly shifts from red to blue, and then goes smoothly from blue to black.

13 Gradients and Patterns

Contents

13.1 Introduction

13.2 Gradients

13.2.1 Introduction

13.2.2 Linear gradients

13.2.3 Radial gradients

13.2.4 Gradient stops