9 Built-in Types of Paint

9.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
gradients (linear or radial)
patterns (vector or image, possibly tiled)

SVG uses the general notion of a paint server. Color, gradients and patterns are just specific types of paint servers. For example, first you define a gradient by including a <gradient> element within a <defs>, assign an ID to that <gradient> object, and then reference that ID in a 'fill' or 'stroke' property:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" 
  "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width="4in" height="3in">
  <desc>Linear gradient example
  </desc>
  <g>
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="0%" style="color:#F60"/>
        <stop offset="70%" style="color:#FF6"/>
      </linearGradient>
    </defs>
    <rect style="fill: url(#MyGradient)" width="20" height="15.8"/>
  </g>
</svg>

Download this example

9.2 Color

9.2.1 Introduction

All SVG colors are specified in the sRGB color space (see [SRGB]). At a minimum, SVG user agents should conform to the color behavior requirements specified in the Colors chapter of the CSS2 specification (see [CSS2]).

Additionally, SVG documents can specify an alternate color specification using an ICC profiles (see [ICC32]). If ICC-based colors are provided and the SVG user agent support ICC color, then the ICC-based color takes precedence over the sRGB color specification.

For more on specifying color properties, refer to the descriptions of the 'fill' property and the 'stroke' property.

The 'color' property is used to provide a potential indirect value (currentColor) for the 'fill' and 'stroke' properties and specifies the color values for gradient stops. The color property is extended from CSS2 to accommodate color definitions in arbitrary color spaces defined by the 'color-space' property.

'color'

Value:	<color> [icc-color(<colorvalue>*)] \| inherit
Initial:	depends on user agent
Applies to:	'fill' and 'stroke' properties and gradient stops.
Inherited:	see Inheritance of Painting Properties
Percentages:	N/A
Media:	visual

For a description of the parameters, refer to the 'fill' property.

9.2.2 Properties for specifying color profiles

The International Color Consortium has established a standard, the ICC Profile [ICC32], for documenting the color characteristics of input and output devices. Using these profiles, it is possible to build a transform and correct visual data for viewing on different devices.

The 'color-profile' property identifies the ICC profile which should be used to process all <icc-color> definitions within the current object.

'color-profile'

Values:	auto \| sRGB \| <uri> \| inherit
Initial:	auto
Applies to:	all elements
Inherited:	yes
Percentages:	n/a
Media:	visual

This property permits the specification of a source color profile other than the default.

auto: This is the default behavior. All colors are presumed to be defined in the sRGB color space unless a more precise embedded profile is specified within content data. For images that do have a profile built into their data, that profile is used. For images that do not have a profile, the sRGB profile is used so that the colors in these images can be kept "in synch" with the colors specified in CSS and HTML.
sRGB: The source profile is assumed to be sRGB. This differs from auto in that it overrides an embedded profile inside an image.
<uri>: The name or location of a standard ICC profile resource. Just like specifying sRGB, it overrides an embedded profile. Due to the size of profiles, the <uri> may specify a special name representing a standard profile. The name sRGB, being the standard WWW color space, is defined separately because of its significance, although the rules regarding application of any special profile should be identical.

'rendering-intent'

Values:	auto \| perceptual \| relative-colorimetric \| saturation \| absolute-colorimetric \| inherit
Initial:	auto
Applies to:	all elements
Inherited:	yes
Percentages:	n/a
Media:	visual

This property permits the specification of a color profile rendering intent other than the default. The behavior of values other than auto and inherent are defined by the International Color Consortium standard.

auto: This is the default behavior. The user-agent determines the best intent based on the content type. For image content containing an embedded profile, it should be assumed that the intent specified within the profile is the desired intent. Otherwise, the user agent should use the current profile (based on the color-profile style) and force the intent, overriding any intent that may be stored in the profile itself.

9.3 Gradients

9.3.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.(??? Include drawing)

Gradients are specified within a <defs> element and are then referenced using 'fill' or 'stroke' or properties on a given graphics element to indicate that the given element should be filled or stroked with the referenced gradient.

9.3.2 Linear Gradients

Linear gradients are defined by a <linearGradient> element.

<!ELEMENT linearGradient (stop|animate|animateTransform)* > <!ATTLIST linearGradient id ID #IMPLIED gradientUnits (userSpace | objectBoundingBox) 'userSpace' gradientTransform CDATA #IMPLIED x1 CDATA #IMPLIED y1 CDATA #IMPLIED x2 CDATA #IMPLIED y2 CDATA #IMPLIED spreadMethod (pad | reflect | repeat) "pad">

Attribute definitions:

gradientUnits = "userSpace | objectBoundingBox"

Defines the coordinate system for attributes x1, y1, x2, y2. If gradientUnits="userSpace" (the default), x1, y1, x2, y2 represent values in the current user coordinate system in place at the time when the <linearGradient> element is defined. If gradientUnits="objectBoundingBox", then x1, y1, x2, y2 represent values in an abstract coordinate system where (0,0) is the (minx,miny) in user space of the bounding box of the object getting filled with the gradient, and (1,1) is the (maxx,maxy) corner of the bounding box. (Note: the bounding box represents the maximum extent of the shape of the object in X and Y with respect to the user coordinate system of the object exclusive of stroke-width.)

gradientTransform = "transform"

Contains the definitions of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpace or objectBoundingBox). This allows for things such as skewing the gradient. gradientTransform can take on the same values as the transform attribute.

x1 = "x-coordinate"

x1, y1, x2, y2 define a gradient vector for the linear gradient. This gradient vector provides starting and ending points onto which the <stops> are mapped. The values of x1, y1, x2, y2 can be either numbers or percentages whose meaning is determined by the value of attribute gradientUnits, as follows:

gradientUnits	Type of value	Meaning of value
"userSpace"	a number	The value represents a coordinate in the current user coordinate system
"userSpace"	a percentage	The value represents a percent distance along the X-axis of the current viewport (see Processing rules for CSS units and percentages)
"objectBoundingBox"	a number	The value represents a fractional position within the bounding box of the given shape, where (0,0) is the (minx,miny) of the shape and (1,1) is the (maxx,maxy) of the shape. (See discussion of gradientUnits="objectBoundingBox".)
"objectBoundingBox"	a percentage	The value represents a fractional position within the bounding box of the given shape, where (0%,0%) is the (minx,miny) of the shape and (100%,100%) is the (maxx,maxy) of the shape. (See discussion of gradientUnits="objectBoundingBox".)

Default value is "0%".

y1 = "y-coordinate"

See x1. Default value is "0%".

x2 = "x-coordinate"

See x1. Default value is "100%".

y2 = "y-coordinate"

See x1. Default value is "0%".

spreadMethod = "pad | reflect | repeat"

Indicates what happens if the 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 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.

Attributes defined elsewhere:: id.

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

(??? Need to include some drawings here showing these attributes)

9.3.3 Radial Gradients

Radial gradients are defined by a <radialGradient> element.

<!ELEMENT radialGradient (stop|animate|animateTransform)* > <!ATTLIST radialGradient id ID #IMPLIED gradientUnits (userSpace | objectBoundingBox) 'userSpace' gradientTransform CDATA #IMPLIED cx CDATA #IMPLIED cy CDATA #IMPLIED r CDATA #IMPLIED fx CDATA #IMPLIED fy CDATA #IMPLIED>

Attribute definitions:

gradientUnits = "userSpace | objectBoundingBox": Defines the coordinate system for attributes cx, cy, r, fx, fy. If gradientUnits="userSpace" (the default), cx, cy, r, fx, fy represent values in the current user coordinate system in place at the time when the <linearGradient> element is defined. If gradientUnits="objectBoundingBox", then cx, cy, r, fx, fy represent values in an abstract coordinate system where (0,0) is the (minx,miny) in user space of the bounding box of the object getting filled with the gradient, and (1,1) is the (maxx,maxy) corner of the bounding box. (Note: the bounding box represents the maximum extent of the shape of the object in X and Y with respect to the user coordinate system of the object exclusive of stroke-width.)
gradientTransform = "transform": Contains the definitions of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpace or objectBoundingBox). This allows for things such as skewing the gradient. gradientTransform can take on the same values as the transform attribute.
cx = "x-coordinate": cx, cy, r define the largest/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/outermost circle. Default value is "50%".
cy = "y-coordinate": See cx. Default value is "50%".
r = "length": See cx. Default value is "50%".
fx = "x-coordinate": fx, 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). The default value is 50%.
fy = "y-coordinate": See fx. Default value is "50%".

Attributes defined elsewhere:: id.

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

(??? Need to include some drawings here showing these attributes)

9.3.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. Here is an example of the definition of a linear gradient that consists of a smooth transition from white-to-red-to-black:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" 
  "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width="4in" height="3in">
  <desc>Radial gradient example with three gradient stops
  </desc>
  <g>
    <defs>
      <radialGradient id="MyGradient">
         <stop offset="0%" style="color:white"/>
         <stop offset="50%" style="color:red"/>
         <stop offset="100%" style="color:black"/>
      </radialGradient>
    </defs>
    <circle style="fill: url(#MyGradient)" r="42"/>
  </g>
</svg>

Download this example

<!ELEMENT stop (animate|animateColor)* >
<!ATTLIST stop
  id ID #IMPLIED
  style CDATA #IMPLIED
  offset CDATA #REQUIRED >

Attribute definitions:

offset = "length": The offset attribute is either a <number> (usually ranging from 0 to 1) or a percentage (correspondingly usually ranging from 0% to 100%) which indicates where the gradient stop should be 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.

Attributes defined elsewhere:: id, style.

The 'stop-color' property (non-inherited) indicates what color to use at that gradient stop. All valid CSS2 color property specifications are available.

An 'stop-opacity' property (non-inherited) can be used to define the opacity of a given gradient stop.

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%.
There needs to be at least two stops defined to have a gradient effect. If no stops are defined, then painting should 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 should 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.

9.4 Patterns

A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted.

Attribute definitions:

patternUnits = "userSpace | objectBoundingBox": Defines the coordinate system for attributes x, y, width, height. If patternUnits="userSpace" (the default), x, y, width, height represent values in the current user coordinate system when the <pattern> element is defined. If patternUnits="objectBoundingBox", then x, y, width, height represent values in an abstract coordinate system where (0,0) is the (minx,miny) in user space of the bounding box of the object getting filled with the pattern, and (1,1) is the (maxx,maxy) corner of the bounding box. (Note: the bounding box represents the maximum extent of the shape of the object in X and Y with respect to the user coordinate system of the object exclusive of stroke-width.)
patternTransform = "transform": Contains the definitions of an optional additional transformation from the pattern coordinate system onto the target coordinate system (i.e., userSpace or objectBoundingBox). This allows for things such as skewing the pattern tiles. patternTransform can take on the same values as the transform attribute.
x = "x-coordinate": x, y, width, height indicate how the pattern tiles should be placed and spaced and represent coordinates and values in the coordinate space specified by patternUnits. Default value is "0%".
y = "y-coordinate": See x. Default value is "0%".
width = "width": See x. Default value is "100%".
height = "height": See x. Default value is "100%".

Attributes defined elsewhere:: id, xml:lang, xml:space, class, style, refX, refY, viewBox, preserveAspectRatio.

An example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" 
  "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width="4in" height="3in" >
  <defs>
    <pattern id="TrianglePattern" 
             patternUnits="userSpace"
             x="0" y="0" width="25" height="25"
             patternTransform="skewX(45)"
             viewBox="0 0 10 10" >
      <path d="M 0 0 L 10 0 L 5 10 z" />
  </defs>
  <!-- Fill this ellipse with the above pattern -->
  <ellipse style="fill: url(#TrianglePattern)" rx="40" ry="27" />
</svg>

Download this example

9 Built-in Types of Paint

Contents

9.1 Introduction

9.2 Color

9.2.1 Introduction

9.2.2 Properties for specifying color profiles

9.3 Gradients

9.3.1 Introduction

9.3.2 Linear Gradients

9.3.3 Radial Gradients

9.3.4 Gradient Stops

9.4 Patterns