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 April 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990412.dtd"> <svg width="4in" height="3in"> <desc>Linear gradient example </desc> <g> <defs> <lineargradient id="MyGradient"> <gradientstop offset="0%" color="#F60"/> <gradientstop offset="70%" 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 |
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: | <dasharray> | inherit |
Initial: | (Empty string) |
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.
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:
(??? 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:
(??? Need to include some drawings here showing these attributes)
The ramp of colors to use on a gradient is defined by the <gradientstop> 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 April 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990412.dtd"> <svg width="4in" height="3in"> <desc>Radial gradient example with three gradient stops </desc> <g> <defs> <radialgradient id="MyGradient"> <gradientstop offset="0%" color="white"/> <gradientstop offset="50%" color="red"/> <gradientstop offset="100%" 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 normative gradient vector. For radial gradients, it represents a percentage distance along the radius of the radial gradient.
The color attribute indicates what color to use at that gradient stop. The possible values for color match the same possible color values available for the 'fill' and 'stroke' properties.
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. The <symbol> element defines the pattern to use. To paint with the pattern, set parameter the <uri> on the 'fill' or 'stroke' properties to the name of the pattern.
This defines a pattern named "fourstar" and then uses this pattern to fill a rectangle:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG April 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990412.dtd"> <svg width="4in" height="3in"> <defs> <symbol id="fourstar"> <!-- Define the pattern using standard graphics elements such as paths, images, text and shapes --> </symbol> </defs> <ellipse style="fill: url(#fourstar)" major="40" minor="27" /> </svg>
(We are still working on patterns. Some of the things we will clearly need: (1) Something like the target-type, target-left, target-top, target-right and target-bottom attributes which gradients have to indicate the target rectangle onto which the pattern's bounding box should be mapped. (2) A matrix attribute to apply a transformation on the pattern after mapping the pattern's bounding box onto the target rectangle. (3) Some attribute to indicate whether to tile in x, y, both or neither (4) Some attributes to replace colors (vector graphics only?).)
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 April 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990412.dtd"> <svg width="4in" height="3in"> <desc>Gradients apply to leaf nodes </desc> <g> <defs> <lineargradient id="MyGradient"> <gradientstop offset="0%" color="#F60"/> <gradientstop offset="70%" color="#FF6"/> </lineargradient> </defs> <g style="fill: url(#MyGradient)"> <rect width="20" height="15.8"/> <rect width="35" height="8"/> </g> </g> </svg>