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 (??? add link) and patterns (??? add link) 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:
<g> <defs> <gradient id="MyGradient"... > <!-- Define gradient here --> </gradient> </defs> <rect style="fill: url(#MyGradient)" .../> </g>
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. For example:
<g> <defs> <lineargradient id="MyGradient" ...> <!-- Definition of the gradient --> </lineargradient> </defs> <rect style="fill: url(#MyGradient)" ... /> </g>
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:
<lineargradient id="white-to-red-to-black" > <gradientstop offset="0%" color="white"/> <gradientstop offset="50%" color="red"/> <gradientstop offset="100%" color="black"/> </gradient>
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 <pattern> 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:
<g> <defs> <pattern id="fourstar" ... > <!-- Define the pattern using standard graphics elements such as paths, images, text and shapes --> </pattern> </defs> <rectangle style="fill: url(#fourstar)" ... /> </g>
(We are still working on patterns. Some of the things we will clearly need: (1) Definition of some sort of viewport within the <pattern> element to define an initial coordinate system for the pattern's graphics (2) 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. (3) A matrix attribute to apply a transformation on the pattern after mapping the pattern's bounding box onto the target rectangle. (4) Some attribute to indicate whether to tile in x, y, both or neither (5) 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):
<g> <defs> <lineargradient id="MyGradient"... > <!-- Define gradient here --> </gradient> </defs> <g style="fill: url(#MyGradient)"> <rect .../> <rect .../> </g> </g>