Vector graphics shapes and text objects can be filled (which means painting the interior of the object) and stroked (which means painting along the outline of the object). Filling and stroking both can be thought of in more general terms as painting operations.
With SVG, you can paint (i.e., fill or stroke) with:
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 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 June 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990625.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>
Value: | none | current-color | <color> [icc-color(<colorvalue>*)] | inherit | <uri> [ none | current-color | <color> [icc-color(<colorvalue>*)] | inherit ] |
Initial: | current-color |
Applies to: | all elements |
Inherited: | see Inheritance of Painting Properties below |
Percentages: | N/A |
Media: | visual |
Note that graphical objects that are not closed (e.g., a <path> without a closepath at the end or a <polyline>) still can be filled. The fill operation automatically closes all open subpaths by connecting the last point of the subpath with the first point of the subpath before painting the fill.
Value: | evenodd | nonzero | inherit |
Initial: | evenodd |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Value: | <opacity-value> |
Initial: | evenodd |
Applies to: | all elements |
Inherited: | yes |
Percentages: | Allowed |
Media: | visual |
'fill-opacity' specifies the opacity of the painting operation used to fill the current object. It is important to note that any given object can have three different opacity properties: 'fill-opacity', 'stroke-opacity' and 'opacity'. The 'fill' painting operation is done and blended into the current background (or temporary offscreen buffer, if 'opacity' is not 1.0) using the value of 'fill-opacity'. Next, The 'stroke' painting operation is done and blended into the current background (or temporary offscreen buffer, if 'opacity' is not 1.0) using the value of 'stroke-opacity'. Finally, if 'opacity' is not 1.0, the offscreen holding the object as a whole is blended into the current background.
(The above paragraph needs to be moved someplace else, such as SVG Rendering Model.)
Value: | <string> | inherit |
Initial: | Empty string |
Applies to: | all elements |
Inherited: | yes |
Percentages: | Paint server-specific. |
Media: | visual |
'fill-params' specifies an arbitrary <string> which is passed to the current fill paint server. The meaning of <string> is paint server-specific. None of the built-in paint servers use 'fill-params'. It is meant as a way to pass parameters to a custom paint servers defined via paint server extensibility.
Value: | none | current-color | <color> [icc-color(<number>*)] | inherit | <uri> [ none | current-color | <color> | inherit ] |
Initial: | none |
Applies to: | all elements |
Inherited: | see Inheritance of Painting Properties below |
Percentages: | N/A |
Media: | visual |
Value: | <width> | inherit |
Initial: | 1 |
Applies to: | all elements |
Inherited: | yes |
Percentages: | Yes |
Media: | visual |
Value: | true | false | inherit |
Initial: | false |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
'stroke-antialiasing' indicates whether the outline of the current object should be antialiased (see drawing below). This attribute does not apply if 'stroke' is none.
Value: | butt | round | square | inherit |
Initial: | butt |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
'stroke-linecap' specifies the shape to be used at the end of open subpaths when they are stroked.
Value: | miter | round | bevel | inherit |
Initial: | miter |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
'stroke-linejoin' specifies the shape to be used at the corners of paths (or other vector shapes) that are stroked. when they are stroked.
Value: | <miterlimit> | inherit |
Initial: | 8 |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
When two line segments meet at a sharp angle and miter joins have been specified for 'stroke-linejoin', it is possible for the miter to extend far beyond the thickness of the line stroking the path. The 'stroke-miterlimit' imposes a limit on the ratio of the miter length to the 'stroke-linewidth'.
Value: | none | <dasharray> | inherit |
Initial: | none |
Applies to: | all elements |
Inherited: | yes |
Percentages: | Yes. See below. |
Media: | visual |
'stroke-dasharray' controls the pattern of dashes and gaps used to stroke paths. The value of <dasharray> is a list of space- or comma-separated <number>'s that specify the lengths of alternating dashes and gaps.
An empty string for 'stroke-dasharray' is equivalent to the value none.
Value: | <dashoffset> | inherit |
Initial: | 0 |
Applies to: | all elements |
Inherited: | yes |
Percentages: | Yes. See below. |
Media: | visual |
'stroke-dashoffset' specifies the distance into the dash pattern to start the dash.
Value: | <opacity-value> | inherit |
Initial: | evenodd |
Applies to: | all elements |
Inherited: | yes |
Percentages: | Allowed |
Media: | visual |
'stroke-opacity' specifies the opacity of the painting operation used to stroke the current object. (??? Add link about how different opacity parameters interact.)
Value: | <string> | inherit |
Initial: | Empty string |
Applies to: | all elements |
Inherited: | yes |
Percentages: | Paint server-specific. |
Media: | visual |
'stroke-params' specifies an arbitrary <string> which is passed to the current stroke paint server. The meaning of <string> is paint server-specific. None of the built-in paint servers use 'stroke-params'. It is meant as a way to pass parameters to a custom paint servers defined via paint server extensibility.
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 object (e.g., a <rect> element) to indicate that the given element should be filled or stroked with the referenced gradient.
Linear gradients are defined by a <lineargradient> element. A <lineargradient> element can have the following attributes:
Percentages are allowed for x1, y1, x2, y2. For gradient-units="userspace", percentages represent values relative to the current viewport. For gradient-units="object-bbox", 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. A <radialgradient> element can have the following attributes:
Percentages are allowed for cx, cy, r, fx, fy. For gradient-units="userspace", percentages represent values relative to the current viewport. For gradient-units="object-bbox", 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 June 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990625.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>
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.
The color property indicates what color to use at that gradient stop. All valid CSS2 color property specifications are available.
An opacity property 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:. The <pattern> element the same attributes as <symbol>, plus the following pattern-specific attributes:
An example:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG June 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990625.dtd"> <svg width="4in" height="3in" > <defs> <pattern id="TrianglePattern" pattern-units="userspace" x="0" y="0" width="25" height="25" pattern-transform="skew-x(45)" fit-bbox="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>
The values of any of the painting properties described in this chapter can be inherited from a given object's parent. Painting, however, is always done on each leaf-node individually, never at the <g> level. Thus, for the following SVG, two distinct gradients are painted (one for each rectangle):
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG June 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990625.dtd"> <svg width="4in" height="3in"> <desc>Gradients apply to leaf nodes </desc> <g> <defs> <lineargradient id="MyGradient"> <stop offset="0%" style="color:#F60"/> <stop offset="70%" style="color:#FF6"/> </lineargradient> </defs> <g style="fill: url(#MyGradient)"> <rect width="20" height="15.8"/> <rect width="35" height="8"/> </g> </g> </svg>