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. Gradients and patterns are just specific types of paint servers. For example, first you define a linear gradient by including a 'linearGradient' element within a 'defs', assign an ID to that 'linearGradient' element, and then reference that ID in a 'fill' or 'stroke' property:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="4in" height="3in"> <desc>Linear gradient example </desc> <g> <defs> <linearGradient id="MyGradient"> <stop offset="0%" style="stop-color:#F60"/> <stop offset="70%" style="stop-color:#FF6"/> </linearGradient> </defs> <rect style="fill: url(#MyGradient)" width="20" height="15.8"/> </g> </svg>
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.
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 shall be filled or stroked with the referenced gradient.
Linear gradients are defined by a 'linearGradient' element.
<!ENTITY % linearGradientExt "" > <!ELEMENT linearGradient (stop|animate|set|animateTransform %linearGradientExt;)* > <!ATTLIST linearGradient id ID #IMPLIED gradientUnits (userSpace | userSpaceOnUse | objectBoundingBox) 'userSpace' gradientTransform CDATA #IMPLIED x1 CDATA #IMPLIED y1 CDATA #IMPLIED x2 CDATA #IMPLIED y2 CDATA #IMPLIED spreadMethod (pad | reflect | repeat) "pad" %xlinkRefAttrs; xlink:href CDATA #IMPLIED > |
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.
Radial gradients are defined by a 'radialGradient' element.
<!ENTITY % radialGradientExt "" > <!ELEMENT radialGradient (stop|animate|set|animateTransform %radialGradientExt;)* > <!ATTLIST radialGradient id ID #IMPLIED gradientUnits (userSpace | userSpaceOnUse | objectBoundingBox) 'userSpace' gradientTransform CDATA #IMPLIED cx CDATA #IMPLIED cy CDATA #IMPLIED r CDATA #IMPLIED fx CDATA #IMPLIED fy CDATA #IMPLIED %xlinkRefAttrs; xlink:href 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.
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 December 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="4in" height="3in"> <desc>Radial gradient example with three gradient stops </desc> <g> <defs> <radialGradient id="MyGradient"> <stop offset="0%" style="stop-color:white"/> <stop offset="50%" style="stop-color:red"/> <stop offset="100%" style="stop-color:black"/> </radialGradient> </defs> <circle style="fill: url(#MyGradient)" r="42"/> </g> </svg>
<!ENTITY % stopExt "" > <!ELEMENT stop (animate|set|animateColor %stopExt;)* > <!ATTLIST stop id ID #IMPLIED style CDATA #IMPLIED offset CDATA #REQUIRED > |
Attribute definitions:
The 'stop-color' property indicates what color to use at that gradient stop. ICC colors can be specified in the same manner as for the 'fill' and 'stroke' properties.
Value: | <color> | 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.
Value: | <alphavalue> | inherit |
Initial: | 1 |
Applies to: | 'stop' elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Animatable: | yes |
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:.
<!ENTITY % patternExt "" > <!ELEMENT pattern (%descTitleDefs;, (path|text|rect|circle|ellipse|line|polyline|polygon| use|image|svg|g|switch|a %ceExt;%patternExt;)*) > <!ATTLIST pattern id ID #IMPLIED xml:lang NMTOKEN #IMPLIED xml:space (default|preserve) #IMPLIED class NMTOKENS #IMPLIED style CDATA #IMPLIED patternUnits (userSpace | userSpaceOnUse | 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' %xlinkRefAttrs; xlink:href CDATA #IMPLIED > |
Attribute definitions:
An example:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19991203.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" /> </pattern> </defs> <!-- Fill this ellipse with the above pattern --> <ellipse style="fill: url(#TrianglePattern)" rx="40" ry="27" /> </svg>
The SVGGradientElement interface is a base interface used by SVGLinearGradientElement and SVGRadialGradientElement.
interface SVGGradientElement : SVGElement { // gradientUnits Types const unsigned short kSVG_GRADIENTUNITS_UNKNOWN = 0; const unsigned short kSVG_GRADIENTUNITS_USERSPACE = 1; const unsigned short kSVG_GRADIENTUNITS_USERSPACEONUSE = 2; const unsigned short kSVG_GRADIENTUNITS_OBJECTBOUNDINGBOX = 3; attribute unsigned short gradientUnits; attribute SVGTransformList gradientTransform; }; |
The SVGLinearGradientElement interface corresponds to the 'linearGradient' element.
interface SVGLinearGradientElement : SVGGradientElement { attribute SVGLength x1; attribute SVGLength y1; attribute SVGLength x2; attribute SVGLength y2; // spreadMethod Types const unsigned short kSVG_SPREADMETHOD_PAD = 0; const unsigned short kSVG_SPREADMETHOD_REFLECT = 1; const unsigned short kSVG_SPREADMETHOD_REPEAT = 2; attribute unsigned short spreadMethod; }; |
The SVGRadialGradientElement interface corresponds to the 'radialGradient' element.
interface SVGRadialGradientElement : SVGGradientElement { attribute SVGLength cx; attribute SVGLength cy; attribute SVGLength r; attribute SVGLength fx; attribute SVGLength fy; }; |
The SVGStopElement interface corresponds to the 'stop' element.
interface SVGStopElement : SVGStyledElement { attribute float offset; }; |
The SVGPatternElement interface corresponds to the 'pattern' element.
interface SVGPatternElement : SVGStyledElement { // patternUnits Types const unsigned short kSVG_PATTERNUNITS_UNKNOWN = 0; const unsigned short kSVG_PATTERNUNITS_USERSPACE = 1; const unsigned short kSVG_PATTERNUNITS_USERSPACEONUSE = 2; const unsigned short kSVG_PATTERNUNITS_OBJECTBOUNDINGBOX = 3; attribute unsigned short patternUnits; attribute SVGTransformList patternTransform; attribute SVGLength x; attribute SVGLength y; attribute SVGLength width; attribute SVGLength height; attribute SVGLength refX; attribute SVGLength refY; attribute SVGRect viewBox; attribute SVGPreserveAspectRatio preserveAspectRatio; }; |