SVG Tiny 1.2 - 20050413

11 Painting: Filling, Stroking, Colors and Paint Servers

Contents

11.1 Introduction

'path' elements, 'text' elements and basic shapes 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. Paint servers are specified using a IRI reference on a 'fill' or 'stroke' property (the IRI reference must be local as described in the IRI Reference Section). Gradients and solid colors are just specific types of paint servers.

11.2 Specifying paint

Properties 'fill' and 'stroke' take on a value of type <paint>, which is specified as follows:

<paint>: none |

currentColor |

<color> |

<iri> |

inherit
none
Indicates that no paint is applied.
currentColor
Indicates that painting is done using the color specified by the 'color' property. This mechanism is provided to facilitate sharing of color attributes between parent grammars such as other (non-SVG) XML. This mechanism allows you to define a style in your HTML which sets the 'color' property and then pass that style to the SVG user agent so that your SVG text will draw in the same color.
<color>
<color> is the explicit color (in the sRGB [SRGB] color space) to be used to paint the current object. SVG supports all of the syntax alternatives for <color> defined in [ CSS2-color-types] including the list of recognized color keywords names.
<iri>
The <iri> is how you identify a paint server such as a gradient. The <iri> provides the ID of the paint server (e.g., a gradient or solid color) to be used to paint the current object. The IRI reference must be local as described in the IRI Reference Section. If the IRI reference is not valid (e.g., it points to an object that doesn't exist or the object is not a valid paint server), then the document is in error (see Error processing).

11.3 Fill Properties

'fill'
Value: <paint> (See Specifying paint)
Initial: black
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

The 'fill' property paints the interior of the given graphical element. The area to be painted consists of any areas inside the outline of the shape. To determine the inside of the shape, all subpaths are considered, and the interior is determined according to the rules associated with the current value of the 'fill-rule' property. The zero-width geometric outline of a shape is included in the area to be painted.

The fill operation fills open subpaths by performing the fill operation as if an additional "closepath" command were added to the path to connect the last point of the subpath with the first point of the subpath. Thus, fill operations apply to both open subpaths within 'path' elements (i.e., subpaths without a closepath command) and 'polyline' elements.

'fill-rule'
Value: nonzero | evenodd | inherit
Initial: nonzero
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

The 'fill-rule' property indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of "inside" is not so obvious.

The 'fill-rule' property provides two options for how the inside of a shape is determined:

nonzero
This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside. The following drawing illustrates the nonzero rule:

Image showing nonzero fill rule

View this example as SVG (SVG-enabled browsers only)

evenodd
This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside. The following drawing illustrates the evenodd rule:

Image showing evenodd fill rule

View this example as SVG (SVG-enabled browsers only)

(Note: the above explanations do not specify what to do if a path segment coincides with or is tangent to the ray. Since any ray will do, one may simply choose a different ray that does not have such problem intersections.)

'fill-opacity'
Value: <opacity-value> | inherit
Initial: 1
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

'fill-opacity' specifies the opacity of the painting operation used to paint the interior the current object. (See Painting shapes and text.)

<opacity-value>
The opacity of the painting operation used to fill the current object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (See Clamping values which are restricted to a particular range.)

Related property: 'stroke-opacity'.

11.4 Stroke Properties

The following are the properties which affect how an element is stroked.

In all cases, all stroking properties which are affected by directionality, such as those having to do with dash patterns, must be rendered such that the stroke operation starts at the same point at which the graphics element starts. In particular, for 'path' elements, the start of the path is the first point of the initial "moveto" command.

For stroking properties such as dash patterns whose computations are dependent on progress along the outline of the graphics element, distance calculations are required to utilize the SVG user agent's standard Distance along a path algorithms.

When stroking is performed using a complex paint server, such as a gradient, the stroke operation must be identical to the result that would have occurred if the geometric shape defined by the geometry of the current graphics element and its associated stroking properties were converted to an equivalent 'path' element and then filled using the given paint server.

'stroke'
Value: <paint> (See Specifying paint)
Initial: none
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

The 'stroke' property paints along the outline of the given graphical element.

A subpath (see Paths) consisting of a single moveto is not stroked. A subpath consisting of a moveto and lineto to the same exact location or a subpath consisting of a moveto and a closepath will be stroked only if the 'stroke-linecap' property is set to "round", producing a circle centered at the given point.

'stroke-width'
Value: <length> | inherit
Initial: 1
Applies to: shapes and text content elements
Inherited: yes
Percentages: No
Media: visual
Animatable: yes
<length>
The width of the stroke on the current object.

A zero value causes no stroke to be painted. A negative value is an error (see Error processing).
'stroke-linecap'
Value: butt | round | square | inherit
Initial: butt
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

'stroke-linecap' specifies the shape to be used at the end of open subpaths when they are stroked.

butt
See drawing below.
round
See drawing below.
square
See drawing below.

Image showing stroke-linecap alternatives

View this example as SVG (SVG-enabled browsers only)

'stroke-linejoin'
Value: miter | round | bevel | inherit
Initial: miter
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

'stroke-linejoin' specifies the shape to be used at the corners of paths or basic shapes when they are stroked.

miter
See drawing below.
round
See drawing below.
bevel
See drawing below.

Image showing stroke-linejoin alternatives

View this example as SVG (SVG-enabled browsers only)



'stroke-miterlimit'
Value: <miterlimit> | inherit
Initial: 4
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

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-width'. When the limit is exceeded, the join is converted from a miter to a bevel.

<miterlimit>
The limit on the ratio of the miter length to the 'stroke-width'. The value of <miterlimit> must be a number greater than or equal to 1. Any other value is an error (see Error processing).

The ratio of miter length (distance between the outer tip and the inner corner of the miter) to 'stroke-width' is directly related to the angle (theta) between the segments in user space by the formula:

miterLength / stroke-width = 1 / sin ( theta / 2 )

For example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.



'stroke-dasharray'
Value: none | <dasharray> | inherit
Initial: none
Applies to: shapes and text content elements
Inherited: yes
Percentages: no
Media: visual
Animatable: yes (non-additive)

'stroke-dasharray' controls the pattern of dashes and gaps used to stroke paths. <dasharray> contains a list of comma-separated (with optional white space) <length>s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke-dasharray: 5,3,2 is equivalent to stroke-dasharray: 5,3,2,5,3,2.

none
Indicates that no dashing is used. If stroked, the line is drawn solid.
<dasharray>
A list of comma-separated <length>'s (with optional white space). A negative <length> value is an error (see Error processing). If the sum of the <length>'s is zero, then the stroke is rendered as if a value of none were specified.
'stroke-dashoffset'
Value: <length> | inherit
Initial: 0
Applies to: shapes and text content elements
Inherited: yes
Percentages: no
Media: visual
Animatable: yes

'stroke-dashoffset' specifies the distance into the dash pattern to start the dash.

<length>
Values can be negative.



'stroke-opacity'
Value: <opacity-value> | inherit
Initial: 1
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

'stroke-opacity' specifies the opacity of the painting operation used to stroke the current object. (See Painting shapes and text.)

<opacity-value>
The opacity of the painting operation used to stroke the current object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (See Clamping values which are restricted to a particular range.)

Related property: 'fill-opacity'.

11.5 Non-Scaling Stroke

Sometimes it is of interest to let the outline of an object keep its original width no matter which transforms are applied to it. E.g. in a map with a 2px wide line representing roads it is of interest to keep the roads 2px wide even when the user zooms into the map.

To achieve this SVGT1.2 introduces the 'vector-effect' property. Future versions of the SVG language will allow for more powerful vector effects through this property but this version restricts it to the non-scaling stroke.

'vector-effect'
Value: non-scaling-stroke | none
Initial: none
Applies to: graphical elements
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

The value 'none' corresponds to not having a vector effect, i.e. the default rendering behaviour from SVG 1.1 is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint.

The value 'non-scaling-stroke' modifies the way object is stroked. Normally stroking involves calculating stroke outline of the shape's path in current user space and filling that outline with the stroke paint (color or gradient). With non-scaling-stroke vector effect, stroke outline is calculated in the "host" coordinate space instead of user coordinate space. More precisely: a user agent establishes a host coordinate space which in SVG 1.2 is always the same as "screen coordinate space". The stroke outline is calculated in the following manner: first, the shape's path is transformed into the host coordinate space. Stroke outline is calculated in the host coordinate space. Resulting outline is transformed back to the user coordinate space. (Stroke outline is always filled with stroke paint in the current user space). The resulting visual effect of this modification is that stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.

Note: Future versions of SVG may allow ways to control host coordinate system.

11.6 Simple alpha compositing

Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing, in which the resulting color and opacity at any given pixel on the canvas is the result of the following formulas (all color values use premultiplied alpha):

Er, Eg, Eb    - Element color value
     Ea            - Element alpha value
     Cr, Cg, Cb    - Canvas color value (before blending)
     Ca            - Canvas alpha value (before blending)
     Cr', Cg', Cb' - Canvas color value (after blending)
     Ca'           - Canvas alpha value (after blending)
     Ca' = 1 - (1 - Ea) * (1 - Ca)
     Cr' = (1 - Ea) * Cr + Er
     Cg' = (1 - Ea) * Cg + Eg
     Cb' = (1 - Ea) * Cb + Eb
     

The following rendering properties, which provide information about the color space in which to perform the compositing operations, apply to compositing operation:

11.7 The 'viewport-fill' Property

SVG enables the author to specify a paint server which will be used to fill the viewport of any element that creates a viewport, such as the root svg element. The referenced paint server is restricted to being a solid color.

The 'viewport-fill' property defines the paint used to fill the viewport created by a particular element.

'viewport-fill'
Value: <paint>
Initial: none
Applies to: viewport-creating elements
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

It is an error to reference a fill that is not a solid color operation. Below is an example of 'viewport-fill'.

Example: 11_02.svg
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2"
      viewport-fill="red" baseProfile="tiny">
      <desc>
      Everything here has a red background.
      The rectangle is not filled, so the red background will show through
      </desc>
      <rect x="20" y="20" width="100" height="100" fill="none" stroke="black"/>
</svg>
    
Rendering of 11_02.svg

The filling of the viewport is the first operation in the rendering chain of an element. Therefore:

11.8 The 'viewport-fill-opacity' Property

The 'viewport-fill-opacity' property specifies the opacity of the 'viewport-fill'.

'viewport-fill-opacity'
Value: <float>
Initial: 1.0
Applies to: viewport-creating elements
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

11.9 The 'overflow' Property

'overflow'
Value: visible
Initial: see prose
Applies to: 'animation' element
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

The 'overflow' property only applies to the 'animation' element in SVGT1.2. It's only possible value is 'visible' which implies that clipping shall not occur.

The initial value for 'overflow' as defined in [CSS2-overflow] is 'visible'; however, SVG traditionally overrides this initial value and set the 'overflow' property to the value 'hidden'. 'hidden' implies clipping but this is not a supported value for SVGT1.2 which means that clipping never needs to be performed.

11.10 Controlling visibility

SVG uses two properties, 'display' and 'visibility', to control the visibility of graphical elements or (in the case of the 'display' property) container elements.

The differences between the two properties are as follows:

'display'
Value: inline | block | list-item |

run-in | compact | marker |

table | inline-table | table-row-group | table-header-group |

table-footer-group | table-row | table-column-group | table-column |

table-cell | table-caption | none | inherit
Initial: inline
Applies to: 'svg', 'g', 'switch', 'a', 'foreignObject', graphics elements (including the 'text' element) and text sub-elements (i.e., 'tspan' and 'a')
Inherited: no
Percentages: N/A
Media: all
Animatable: yes

A value of display: none indicates that the given element and its children shall not be rendered directly (i.e., those elements are not present in the rendering tree). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent.

The 'display' property only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements.

Elements with display: none do not take up space in text layout operations, do not receive events, and do not contribute to bounding box calculations.

Except for any additional information provided in this specification, the normative definition is the CSS2 definition of the 'display' property.

'visibility'
Value: visible | hidden | collapse | inherit
Initial: visible
Applies to: graphics elements (including the 'text' element) and text sub-elements (i.e., 'tspan' and 'a')
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
visible
The current graphics element is visible.
hidden or collapse
The current graphics element is invisible (i.e., nothing is painted on the canvas).

Note that if the 'visibility' property is set to hidden on a 'tspan' element, then the text is invisible but still takes up space in text layout calculations.

Depending on the value of property 'pointer-events', graphics elements which have their 'visibility' property set to hidden still might receive events.

Except for any additional information provided in this specification, the normative definition is the CSS2 definition of the 'visibility' property.

11.11 Rendering hints

11.11.1 The 'color-rendering' property

The creator of SVG content might want to provide a hint to the implementation about how to make speed vs. quality tradeoffs as it performs color interpolation and compositing. The 'color-rendering' property provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations.

'color-rendering'
Value: auto | optimizeSpeed | optimizeQuality | inherit
Initial: auto
Applies to: container elements, graphics elements and 'animateColor'
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over quality. For RGB display devices, this option will sometimes cause the user agent to perform color interpolation and compositing in the device RGB color space.
optimizeQuality
Indicates that the user agent shall emphasize quality over rendering speed.

11.11.2 The 'shape-rendering' property

The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders vector graphics elements such as 'path' elements and basic shapes such as circles and rectangles. The 'shape-rendering' property provides these hints.

'shape-rendering'
Value: auto | optimizeSpeed | crispEdges |

geometricPrecision | inherit
Initial: auto
Applies to: shapes
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.
crispEdges
Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
geometricPrecision
Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.

11.11.3 The 'text-rendering' property

The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The 'text-rendering' property provides these hints.

'text-rendering'
Value: auto | optimizeSpeed | optimizeLegibility |

geometricPrecision | inherit
Initial: auto
Applies to: 'text' elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause the user agent to turn off text anti-aliasing.
optimizeLegibility
Indicates that the user agent shall emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.
geometricPrecision
Indicates that the user agent shall emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.

11.11.4 The 'image-rendering' property

The creator of SVG content might want to provide a hint to the implementation about how to make speed vs. quality tradeoffs as it performs image processing. The 'image-rendering' property provides a hint to the SVG user agent about how to optimize its image rendering.:

'image-rendering'
Value: auto | optimizeSpeed | optimizeQuality | inherit
Initial: auto
Applies to: images
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed. The user agent shall employ a resampling algorithm at least as good as nearest neighbor resampling, but bilinear resampling is strongly preferred. For Conforming High-Quality SVG Viewers, the user agent shall employ a resampling algorithm at least as good as bilinear resampling.
optimizeQuality
Indicates that the user agent shall emphasize quality over rendering speed. The user agent shall employ a resampling algorithm at least as good as bilinear resampling.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over quality. The user agent should use a resampling algorithm which achieves the goal of fast rendering, with the requirement that the resampling algorithm shall be at least as good as nearest neighbor resampling. If performance goals can be achieved with higher quality algorithms, then the user agent should use the higher quality algorithms instead of nearest neighbor resampling.

In all cases, resampling must be done in a truecolor (e.g., 24-bit) color space even if the original data and/or the target device is indexed color.

11.12 Inheritance of painting properties

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 graphics element individually, never at the container element (e.g., a 'g') level. Thus, for the following SVG, even though the gradient fill is specified on the 'g', the gradient is simply inherited through the 'g' element down into each rectangle, each of which is rendered such that its interior is painted with the gradient.

Example Inheritance

Example: 11_01.svg
<?xml version="1.0" standalone="no"?>
<svg width="7cm" height="2cm" viewBox="0 0 700 200"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <desc>Gradients apply to leaf nodes
  </desc>
  <g>
    <defs>
      <linearGradient id="MyGradient" gradientUnits="objectBoundingBox">
        <stop offset="0%" stop-color="#F60" />
        <stop offset="100%" stop-color="#FF6" />
      </linearGradient>
    </defs>
    <rect x="1" y="1" width="698" height="198"
          fill="none" stroke="blue" stroke-width="2" />
    <g fill="url(#MyGradient)" >
      <rect x="100" y="50" width="200" height="100"/>
      <rect x="400" y="50" width="200" height="100"/>
   </g>
  </g>
</svg>
    
Rendering of 11_01.svg

Any painting properties defined in terms of the object's bounding box use the bounding box of the graphics element to which the operation applies. Note that text elements are defined such that any painting operations defined in terms of the object's bounding box use the bounding box of the entire 'text' element. (See the discussion of object bounding box units and text elements.)

11.13 Object and group opacity: the 'opacity' property

There are several opacity properties within SVG:

Except for object/group opacity (described just below), all other opacity properties are involved in intermediate rendering operations. Object/group opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the object/group is rendered into an RGBA offscreen image, the object/group opacity setting specifies how to blend the offscreen image into the current background.

Object/group opacity can, if applied to container elements, be a resource intensive operation. Therefore this version of SVG restricts this property to only apply to the image element.

'opacity'
Value: <opacity-value> | inherit
Initial: 1
Applies to: image element
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes
<opacity-value>
The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (See Clamping values which are restricted to a particular range.)

11.14 Color

All SVG colors are specified in the sRGB color space (see [SRGB]). SVG user agents must conform to the color behavior requirements specified in the color units section and the minimal gamma correction rules defined in the CSS2 specification.

11.14.1 The solidColor Element

The solidColor element is a paint server that provides a single color with opacity. It can be referenced like the other paint servers (i.e. gradients).

Schema: solidColor
  <define name='solidColor'>
    <element name='solidColor'>
      <ref name='solidColor.AT'/>
      <ref name='solidColor.CM'/>
    </element>
  </define>

  <define name='solidColor.CM'>
    <zeroOrMore>
      <choice>
        <ref name='svg.Desc.group'/>
        <ref name='svg.Animate.group'/>
        <ref name='svg.Handler.group'/>
        <ref name='svg.Discard.group'/>
      </choice>
    </zeroOrMore>
  </define>

  <define name='solidColor.AT' combine='interleave'>
    <ref name='svg.Properties.attr'/>
    <ref name='svg.Core.attr'/>
  </define>

  <define name='svg.Properties.attr' combine='interleave'>
    <optional>
      <attribute name='solid-color' svg:animatable='true' svg:inheritable='false'>
        <choice>
          <value>inherit</value>
          <ref name='SVGColor.datatype'/>
        </choice>
      </attribute>
    </optional>
    <optional>
      <attribute name='solid-opacity' svg:animatable='true' svg:inheritable='false'>
        <choice>
          <value>inherit</value>
          <ref name='OpacityValue.datatype'/>
        </choice>
      </attribute>
    </optional>
  </define>
    

The solid-color property indicates what color to use for this solidColor element. The keyword currentColor can be specified in the same manner as within a <paint> specification for the fill and stroke properties.

solid-color
Value: currentColor | <color> | inherit
Initial: black
Applies to: solidColor elements
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

The solid-opacity property defines the opacity of a given solid color.

solid-opacity
Value: <opacity-value> | inherit
Initial: 1
Applies to: solidColor elements
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

Below is an example of the solidColor element:

Example: solidcolor.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="480" height="360" viewBox="0 0 480 360">
    <title>&lt;solidColor&gt; Example</title>
  
    <defs>
        <solidColor id="solidCrimson" solid-color="crimson" solid-opacity="0.7"/>
    </defs>

    <g>
        <circle transform="translate(100, 150)" fill="url(#solidCrimson)n" r="30" />
        <rect fill="url(#solidCrimson)" transform="translate(190, 150)" x="-30" y="-30" width="60" height="60" />
        <path fill="url(#solidCrimson)" transform="translate(270, 150)"  d="M 0 -30 L 30 30 L -30 30 Z" />
        <text fill="url(#solidCrimson)" transform="translate(340, 150)" y="21" font-weight="bold" font-size="60">A</text>
    </g>
</svg>
    
Rendering of solidcolor.svg

11.14.2 The 'color' property

The 'color' property is used to provide a potential indirect value (currentColor) for the 'fill', 'stroke', 'stop-color' properties.

'color'
Value: <color> | inherit
Initial: depends on user agent
Applies to: elements to which properties 'fill', 'stroke', 'stop-color' apply
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes

Except for any additional information provided in this specification, the normative definition of the property is in [CSS2].

11.15 Paint Servers

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 built-in paint servers. The 'solidColor' element is another built-in paint server, described in Color.

Paint servers are referenced using an IRI reference on a 'fill' or 'stroke' property.

11.16 Gradients

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' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.

11.16.1 Linear gradients

Linear gradients are defined by a 'linearGradient' element.

Schema: linearGradient
  <define name='linearGradient'>
    <element name='linearGradient'>
      <ref name='linearGradient.AT'/>
      <ref name='GradientCommon.CM'/>
    </element>
  </define>

  <define name='linearGradient.AT' combine='interleave'>
    <ref name='svg.Properties.attr'/>
    <ref name='svg.Core.attr'/>
    <ref name='svg.X12Y12.attr'/>
  </define>

  <define name='svg.GradientCommon.attr' combine='interleave'>
    <ref name='svg.Properties.attr'/>
    <ref name='svg.Core.attr'/>
    <optional>
      <attribute name='gradientUnits' svg:animatable='true' svg:inheritable='false'>
        <choice>
          <value>userSpaceOnUse</value>
          <value>objectBoundingBox</value>
        </choice>
      </attribute>
    </optional>
  </define>

  <define name='GradientCommon.CM'>
    <zeroOrMore>
      <choice>
        <ref name='svg.Desc.group'/>
        <ref name='svg.Animate.group'/>
        <ref name='svg.Discard.group'/>
        <ref name='stop'/>
      </choice>
    </zeroOrMore>
  </define>
    

Attribute definitions:

gradientUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for attributes x1, y1, x2, y2.

If gradientUnits="userSpaceOnUse", x1, y1, x2, y2 represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a 'fill' or 'stroke' property).

If gradientUnits="objectBoundingBox", the user coordinate system for attributes x1, y1, x2, y2 is established using the bounding box of the element to which the gradient is applied (see Object bounding box units).

When gradientUnits="objectBoundingBox" the stripes of the linear gradient are perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,0) is at the top/right of the object bounding box). When the object's bounding box is not square, the stripes that are conceptually perpendicular to the gradient vector within object bounding box space will render non-perpendicular relative to the gradient vector in user space due to application of the non-uniform scaling transformation from bounding box space to user space.

If attribute gradientUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.

Animatable: yes.
x1 = "<coordinate>"
x1, y1, x2, y2 define a gradient vector for the linear gradient. This gradient vector provides starting and ending points onto which the gradient stops are mapped. The values of x1, y1, x2, y2 can only be numbers.

If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes.
y1 = "<coordinate>"
See x1.

If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes.
x2 = "<coordinate>"
See x1.

If the attribute is not specified, the effect is as if a value of "1" were specified.

Animatable: yes.
y2 = "<coordinate>"
See x1.

If the attribute is not specified, the effect is as if a value of "0" were specified.

Animatable: yes.


If x1 = x2 and y1 = y2, then the area to be painted will be painted as a single color using the color and opacity of the last gradient stop.

If the gradient starts or ends inside the bounds of the target rectangle the terminal colors of the gradient are used to fill the remainder of the target region.

Properties inherit into the 'linearGradient' element from its ancestors; properties do not inherit from the element referencing the 'linearGradient' element.

'linearGradient' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'linearGradient' element; thus, 'linearGradient' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'linearGradient' elements are available for referencing even when the 'display' property on the 'linearGradient' element or any of its ancestors is set to none.

Example lingrad01 shows how to fill a rectangle by referencing a linear gradient paint server.

Example: 13_01.svg
<?xml version="1.0" standalone="no"?>
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <desc>Example lingrad01 - fill a rectangle using a 
           linear gradient paint server</desc>
  <g>
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
      </linearGradient>
    </defs>
    <!-- Outline the drawing area in blue -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>
    <!-- The rectangle is filled using a linear gradient paint server -->
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>
    
Rendering of 13_01.svg

11.16.2 Radial gradients

Radial gradients are defined by a 'radialGradient' element.

Schema: radialGradient
  <define name='radialGradient'>
    <element name='radialGradient'>
      <ref name='radialGradient.AT'/>
      <ref name='GradientCommon.CM'/>
    </element>
  </define>

  <define name='radialGradient.AT' combine='interleave'>
    <ref name='svg.Properties.attr'/>
    <ref name='svg.Core.attr'/>
    <ref name='svg.CxCy.attr'/>
    <ref name='svg.R.attr'/>
  </define>
    

Attribute definitions:

gradientUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for attributes cx, cy, r.

If gradientUnits="userSpaceOnUse", cx, cy, r represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a 'fill' or 'stroke' property).

If gradientUnits="objectBoundingBox", the user coordinate system for attributes cx, cy, r is established using the bounding box of the element to which the gradient is applied (see Object bounding box units).

When gradientUnits="objectBoundingBox" the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the non-uniform scaling transformation from bounding box space to user space.

If attribute gradientUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.

Animatable: yes.
cx = "<coordinate>"
cx, cy, r define the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the "1" gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.

If the attribute is not specified, the effect is as if a value of "0.5" were specified.

The gradient will be drawn such that the "0" gradient stop is mapped to (cx, cy).

Animatable: yes.
cy = "<coordinate>"
See cx.

If the attribute is not specified, the effect is as if a value of "0.5" were specified.

Animatable: yes.
r = "<length>"
See cx.

A negative value is an error (see Error processing). A value of zero will cause the area to be painted as a single color using the color and opacity of the last gradient stop.

If the attribute is not specified, the effect is as if a value of "0.5" were specified.

Animatable: yes.


If the gradient starts or ends inside the bounds of the object(s) being painted by the gradient the terminal colors of the gradient are used to fill the remainder of the target region.

Properties inherit into the 'radialGradient' element from its ancestors; properties do not inherit from the element referencing the 'radialGradient' element.

'radialGradient' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'radialGradient' element; thus, 'radialGradient' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'radialGradient' elements are available for referencing even when the 'display' property on the 'radialGradient' element or any of its ancestors is set to none.

Example radgrad01 shows how to fill a rectangle by referencing a radial gradient paint server.

Example: 13_02.svg
<?xml version="1.0" standalone="no"?>
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <desc>Example radgrad01 - fill a rectangle by referencing a 
           radial gradient paint server</desc>
  <g>
    <defs>
      <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
                      cx="400" cy="200" r="300" fx="400" fy="200">
        <stop offset="0%" stop-color="red" />
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="red" />
      </radialGradient>
    </defs>
    <!-- Outline the drawing area in blue -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>
    <!-- The rectangle is filled using a radial gradient paint server -->
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>
    
Rendering of 13_02.svg

11.16.3 Gradient stops

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.

Schema: stop
  <define name='stop'>
    <element name='stop'>
      <ref name='stop.AT'/>
      <ref name='stop.CM'/>
    </element>
  </define>

  <define name='stop.CM'>
    <zeroOrMore>
      <choice>
        <ref name='svg.Desc.group'/>
        <ref name='svg.Animate.group'/>
      </choice>
    </zeroOrMore>
  </define>

  <define name='stop.AT' combine='interleave'>
    <ref name='svg.Properties.attr'/>
    <ref name='svg.Core.attr'/>
    <attribute name='offset' svg:animatable='true' svg:inheritable='false'>
      <ref name='GradientOffset.datatype'/>
    </attribute>
  </define>
    

Attribute definitions:

offset = "<number>"
The offset attribute is a <number> (usually ranging from 0 to 1) which indicates where the gradient stop is placed. For linear gradients, the offset attribute represents a location along the gradient vector. For radial gradients, it represents a relative distance from (cx,cy) to the edge of the outermost/largest circle.

Animatable: yes.


The 'stop-color' property indicates what color to use at that gradient stop. The keyword currentColor can be specified in the same manner as within a <paint> specification for the 'fill' and 'stroke' properties.

'stop-color'
Value: currentColor |

<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.

'stop-opacity'
Value: <opacity-value> | inherit
Initial: 1
Applies to: 'stop' elements
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

Some notes on gradients:

11.17 Paint Attribute Module

The Paint Attribute Module contains the following attributes:

11.18 Opacity Attribute Module

The Opacity Attribute Module contains the following attributes:

11.19 Graphics Attribute Module

The Graphics Attribute Module contains the following attributes:

11.20 Gradient Module

The Gradient Module contains the following elements:

11.21 Solid Color Module

The Solid Color Module contains the following element: