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 with an ID and then reference that ID in a 'fill' or 'stroke' property:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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.
Once defined, gradients 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 %stdAttrs; gradientUnits (userSpace | userSpaceOnUse | objectBoundingBox) 'userSpace' gradientTransform %TransformList; #IMPLIED x1 %Coordinate; #IMPLIED y1 %Coordinate; #IMPLIED x2 %Coordinate; #IMPLIED y2 %Coordinate; #IMPLIED spreadMethod (pad | reflect | repeat) "pad" %xlinkRefAttrs; xlink:href %URI; #IMPLIED externalResourcesRequired %Boolean; #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 %stdAttrs; gradientUnits (userSpace | userSpaceOnUse | objectBoundingBox) 'userSpace' gradientTransform %TransformList; #IMPLIED cx %Coordinate; #IMPLIED cy %Coordinate; #IMPLIED r %Length; #IMPLIED fx %Coordinate; #IMPLIED fy %Coordinate; #IMPLIED %xlinkRefAttrs; xlink:href %URI; #IMPLIED externalResourcesRequired %Boolean; #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 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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)" cx="2in" cy="1.5in" r="1.25in"/> </g> </svg>
<!ENTITY % stopExt "" > <!ELEMENT stop (animate|set|animateColor %stopExt;)* > <!ATTLIST stop %stdAttrs; class %ClassList; #IMPLIED offset %Length; #REQUIRED %StylableSVG-StyleAttribute; %ExchangeSVG-GradientAttrs; > |
Attribute definitions:
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.
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.
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 %stdAttrs; %langSpaceAttrs; class %ClassList; #IMPLIED %testAttrs; externalResourcesRequired %Boolean; #IMPLIED patternUnits (userSpace | userSpaceOnUse | objectBoundingBox) 'userSpace' patternTransform %TransformList; #IMPLIED x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED width %Length; #REQUIRED height %Length; #REQUIRED viewBox %ViewBoxSpec; #IMPLIED preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet' %xlinkRefAttrs; xlink:href %URI; #IMPLIED %StylableSVG-StyleAttribute; %ExchangeSVG-ContainerAttrs; %ExchangeSVG-FillStrokeAttrs; %ExchangeSVG-GradientAttrs; %ExchangeSVG-GraphicsAttrs; %ExchangeSVG-MarkerAttrs; %ExchangeSVG-TextContainerAttrs; %ExchangeSVG-TextElementAttrs; %ExchangeSVG-ViewportAttrs; > |
Attribute definitions:
An example:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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 following interfaces are defined below: SVGGradientElement, SVGLinearGradientElement, SVGRadialGradientElement, SVGStopElement, SVGPatternElement.
The SVGGradientElement interface is a base interface used by SVGLinearGradientElement and SVGRadialGradientElement.
interface SVGGradientElement : SVGElement, SVGURIReference, SVGUnitTypes { attribute unsigned short gradientUnits; attribute SVGTransformList gradientTransform; };
The SVGLinearGradientElement interface corresponds to the 'linearGradient' element.
interface SVGLinearGradientElement : SVGGradientElement { // Spread Method Types constant unsigned short SVG_SPREADMETHOD_UNKNOWN = 0; constant unsigned short SVG_SPREADMETHOD_PAD = 1; constant unsigned short SVG_SPREADMETHOD_REFLECT = 2; constant unsigned short SVG_SPREADMETHOD_REPEAT = 3; attribute SVGLength x1; attribute SVGLength y1; attribute SVGLength x2; attribute SVGLength y2; attribute unsigned short spreadMethod; };
SVG_SPREADMETHOD_UNKNOWN | The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. | |
SVG_SPREADMETHOD_PAD | Corresponds to value pad. | |
SVG_SPREADMETHOD_REFLECT | Corresponds to value reflect. | |
SVG_SPREADMETHOD_REPEAT | Corresponds to value repeat. |
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 : SVGElement { attribute DOMString className; attribute float offset; #ifdef STYLABLESVG // The following pre-defined attribute collections are only // available in the DOM for Stylable SVG. STYLABLESVGStyleAttribute; #endif STYLABLESVG };
The SVGPatternElement interface corresponds to the 'pattern' element.
interface SVGPatternElement : SVGElement, SVGLangSpace, SVGFitToViewBox, SVGURIReference, SVGUnitTypes { attribute DOMString className; attribute unsigned short patternUnits; attribute SVGTransformList patternTransform; attribute SVGLength x; attribute SVGLength y; attribute SVGLength width; attribute SVGLength height; #ifdef STYLABLESVG // The following pre-defined attribute collections are only // available in the DOM for Stylable SVG. STYLABLESVGStyleAttribute; #endif STYLABLESVG #ifdef EXCHANGESVG // The following pre-defined attribute collections are only // available in the DOM for Exchange SVG. EXCHANGESVGContainerAttrs; EXCHANGESVGFillStrokeAttrs; EXCHANGESVGGradientAttrs; EXCHANGESVGGraphicsAttrs; EXCHANGESVGMarkerAttrs; EXCHANGESVGTextContainerAttrs; EXCHANGESVGTextElementAttrs; EXCHANGESVGViewportAttrs; #endif EXCHANGESVG };