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:
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>
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.
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.
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.
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.
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.
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.
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 | 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".) |
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)
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:
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)
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>
<!ELEMENT stop (animate|animateColor)* > <!ATTLIST stop id ID #IMPLIED style CDATA #IMPLIED offset CDATA #REQUIRED > |
Attribute definitions:
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:
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.
Patterns are defined using a <pattern> element
and then referenced by properties fill: and stroke:.
<!ELEMENT pattern (defs?,desc?,title?, (path|text|rect|circle|ellipse|line|polyline|polygon| use|image|svg|g|switch|a| animate|animateTransform)*)> <!ATTLIST pattern id ID #IMPLIED xml:lang NMTOKEN #IMPLIED xml:space (default|preserve) #IMPLIED class NMTOKENS #IMPLIED style CDATA #IMPLIED patternUnits (userSpace | objectBoundingBox) 'userSpace' patternTransform CDATA #IMPLIED x CDATA #IMPLIED y CDATA #IMPLIED width CDATA #REQUIRED height CDATA #REQUIRED refX CDATA #IMPLIED refY CDATA #IMPLIED viewBox CDATA #IMPLIED preserveAspectRatio CDATA 'xMidYMid meet' > |
Attribute definitions:
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>