11 Painting: Filling, Stroking and Marker Symbols


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.

Certain elements (i.e., 'path', 'polyline', 'polygon' and 'line' elements) can also have marker symbols drawn at their vertices.

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 URI reference on a 'fill' or 'stroke' property. Gradients and patterns 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> [icc-color(<name>[,<icccolorvalue>]*)] |
<uri> [ none | currentColor | <color> [icc-color(<name>[,<icccolorvalue>]*)]] |
inherit
none
Indicates that the object has no fill (i.e., the interior is transparent).
currentColor
Indicates that the object is filled with 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> [icc-color(<name>[,<icccolorvalue>]*)]
<color> is the explicit color (in the sRGB [SRGB] color space) to be used to fill the current object. SVG supports all of the syntax alternatives for <color> defined in [CSS2]. If an optional ICC color specification is provided, then the user agent searches the color profile description database for an color profile description entry whose name descriptor matches <name> and uses the last matching entry that is found. (If no match is found, then the ICC color specification is ignored.) The comma-separated list (with optional white space) of <icccolorvalue>'s is a set of ICC-profile-specific color values, expressed as <number>s. On platforms which support ICC-based color management, the icc-color gets precedence over the <color> (which is in the sRGB color space). Note that color interpolation occurs in an RGB color space even if an ICC-based color specification is provided (see 'color-interpolation'). Percentages are not allowed on <icccolorvalue>'s. For more on ICC-based colors, refer to Color profile descriptions.
<uri>
   [ none |
      currentColor |
      <color> [icc-color(<name>[,<icccolorvalue>]*)]
The <uri> is how you identify a paint server such as a gradient, a pattern or a custom paint defined by an extension (see Extensibility). The <uri> provides the ID of the paint server (e.g., a gradient or a pattern) to be used to paint the current object. If the URI 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 paint method following the <uri> (i.e., none | currentColor | <color> [icc-color(<name>[,<icccolorvalue>]*)]| inherit) is used if provided; otherwise, the document is in error (see Error processing).

11.3 Fill Properties

'fill'
Value:   <paint> (See Specifying paint)
Initial:   black
Applies to:   all elements
Inherited:   see Inheritance of Painting Properties below
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 automatically closes all open subpaths by connecting the last point of the subpath with the first point of the subpath before painting the fill. 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:   all 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:   all 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 properties: 'stroke-opacity' and '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 or a pattern, 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:   all elements
Inherited:   see Inheritance of Painting Properties below
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:   <width> | inherit
Initial:   1
Applies to:   all elements
Inherited:   yes
Percentages:   Yes
Media:   visual
Animatable:   yes
<width>
The width of the stroke on the current object, expressed as a <length>. If a percentage is used, the <width> is expressed as a percentage of the current viewport. (See Units.)
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:   all 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.


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

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

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


'stroke-miterlimit'
Value:   <miterlimit> | inherit
Initial:   4
Applies to:   all 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-linewidth'.

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


'stroke-dasharray'
Value:   none | <dasharray> | inherit
Initial:   none
Applies to:   all elements
Inherited:   yes
Percentages:   yes (see below)
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) <number>s that specify the lengths of alternating dashes and gaps in user units. 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), each of which can have a unit identifier , including specification of a percentage. A percentage represents a distance as a percentage of the current viewport. (See Units.) 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:   <dashoffset> | inherit
Initial:   0
Applies to:   all elements
Inherited:   yes
Percentages:   see prose
Media:   visual
Animatable:   yes

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

<dashoffset>
A <length>. If a percentage is used, the <width> is expressed as a percentage of the current viewport
(See Units.)
Values can be negative.


'stroke-opacity'
Value:   <opacity-value> | inherit
Initial:   1
Applies to:   all 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 properties: 'fill-opacity' and 'opacity'.

11.5 Controlling visibility

SVG uses two properties, 'display' and 'visibility', to control the visibility of graphical content. Either property can make an element invisible.

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:   all elements
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 (i.e., document rendering occurs as if the given element and its children were not part of the document). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent.

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

'visibility'
Value:   visible | hidden | collapse | inherit
Initial:   inherit
Applies to:   all elements
Inherited:   no
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' or 'tref' element, then the text is invisible but still takes up space in calculations of text layout.

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 of the property is in [CSS2].

11.6 Markers

11.6.1 Introduction

A marker is a symbol which is attached to one or more vertices of 'path', 'line', 'polyline' and 'polygon' elements. Typically, markers are used to make arrowheads or polymarkers. Arrowheads can be defined by attaching a marker to the start or end vertices of 'path', 'line' or 'polyline' elements. Polymarkers can be defined by attaching a marker to all vertices of a 'path', 'line', 'polyline' or 'polygon' element.

The graphics for a marker are defined by a 'marker' element. To indicate that a particular 'marker' element should be rendered at the vertices of a particular 'path', 'line', 'polyline' or 'polygon' element, set one or more marker properties ('marker', 'marker-start', 'marker-mid' or 'marker-end') to reference the given 'marker' element.

Example Marker draws a triangular marker symbol as an arrowhead at the end of a path.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 
  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="4in" height="2in" 
     viewBox="0 0 4000 2000" >
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect x="10" y="10" width="3980" height="1980"
       style="fill:none; stroke:blue; stroke-width:10"/>
  <desc>Placing an arrowhead at the end of a path.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        style="fill:none; stroke:black; stroke-width:100; 
        marker-end:url(#Triangle)" />
</svg>
Example Marker
Example Marker - Triangular marker at the end of a path

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

Markers can be animated. The animated effects will show on all current uses of the markers within the document.

11.6.2 The 'marker' element

The 'marker' element defines the graphics that is to be used for drawing arrowheads or polymarkers on a given 'path', 'line', 'polyline' or 'polygon' element.
 

<!ENTITY % markerExt "" >
<!ELEMENT marker (desc|title|metadata|defs|
                   path|text|rect|circle|ellipse|line|polyline|polygon|
                   use|image|svg|g|view|switch|a|altGlyphDef|
                   script|style|symbol|marker|clipPath|mask|
                   linearGradient|radialGradient|pattern|filter|cursor|font|
                   animate|set|animateMotion|animateColor|animateTransform|
                   color-profile|font-face
                   %ceExt;%markerExt;)* >
<!ATTLIST marker
  %stdAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All;
  viewBox %ViewBoxSpec; #IMPLIED
  preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
  refX %Coordinate; #IMPLIED
  refY %Coordinate; #IMPLIED
  markerUnits (strokeWidth | userSpaceOnUse) #IMPLIED
  markerWidth  %Length; #IMPLIED
  markerHeight %Length; #IMPLIED
  orient CDATA #IMPLIED >

Attribute definitions:

markerUnits = "strokeWidth | userSpaceOnUse"
Defines the coordinate system for attributes markerWidth, markerHeight and the contents of the 'marker'.
If markerUnits="strokeWidth", markerWidth, markerHeight and the contents of the 'marker' represent values in a coordinate system which has a single unit equal the size in user units of the current stroke width (see the 'stroke-width' property) in place for the graphic object referencing the marker.
If markerUnits="userSpaceOnUse", markerWidth, markerHeight and the contents of the 'marker' represent values in the current user coordinate system in place for the graphic object referencing the marker (i.e., the user coordinate system for the element referencing the 'marker' element via a 'marker', 'marker-start', 'marker-mid' or 'marker-end' property).
If attribute markerUnits is not specified, then the effect is as if a value of strokeWidth were specified.
Animatable: yes.
refX = "<coordinate>"
The x-axis coordinate of the reference point which is to be aligned exactly at the marker position. The coordinate is defined in the coordinate system after application of the viewBox and preserveAspectRatio attributes.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
refY = "<coordinate>"
The y-axis coordinate of the reference point which is to be aligned exactly at the marker position. The coordinate is defined in the coordinate system after application of the viewBox and preserveAspectRatio attributes.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
markerWidth = "<length>"
Represents the width of the region into which the marker is to be fitted when it is rendered.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of "3" were specified.
Animatable: yes.
markerHeight = "<length>"
Represents the height of the region into which the marker is to be fitted when it is rendered.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of "3" were specified.
Animatable: yes.
orient = "auto | <angle>"
Indicates how the marker is rotated. A value of auto indicates that the marker is oriented such that its positive x-axis is pointing in a direction that is the average of the ending direction of path segment going into the vertex and the starting direction of the path segment going out of the vertex. (Refer to 'path' element implementation notes for a more thorough discussion of the directionality of path segments.) A value of <angle> represents a particular orient in the user space of the graphic object referencing the marker. For example, if a value of "0" is given, then the marker will be drawn such that its x-axis will align with the x-axis of the user space of the graphic object referencing the marker. If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes (non-additive, 'set' and 'animate' elements only).

Attributes defined elsewhere:
%stdAttrs;, %langSpaceAttrs;, class, externalResourcesRequired, viewBox, preserveAspectRatio, style, %PresentationAttributes-All;.

Markers are drawn such that their reference point (i.e., attributes refX and refY) is positioned at the given vertex. In other words, a translation transformation is constructed by the user agent to achieve the effect of having point (refX and refY) within the marker content's coordinate system (after any transformations due to the viewBox and preserveAspectRatio attributes) align exactly with the given vertex.

SVG's user agent style sheet sets the 'overflow' property for 'marker' elements to hidden, which causes a rectangular clipping path to be created at the bounds of the marker tile. Unless the 'overflow' property is overridden, any graphics within the marker which goes outside of the marker rectangle will be clipped.

The contents of the 'marker' are relative to a new coordinate system. If there is a viewBox attribute, then the new coordinate system is fitted into the region with an origin at (0,0) and width and height established by attributes markerWidth, markerHeight and markerUnits. on the 'marker' element using the standard rules for viewBox and preserveAspectRatio. If there is no viewBox attribute, then the new coordinate system is such that the size of a single unit is defined by the value of attribute markerUnits with its origin at arbitrary location (0,0).

11.6.3 Marker properties

'marker-start' defines the arrowhead or polymarker that shall be drawn at the first vertex of the given 'path' element or vector graphic shape. 'marker-end' defines the arrowhead or polymarker that shall be drawn at the final vertex. 'marker-mid' defines the arrowhead or polymarker that shall be drawn at every other vertex (i.e., every vertex except the first and last).

'marker-start', 'marker-end', marker-mid'
Value:   none |
inherit |
<uri>
Initial:   none
Applies to:   'path', 'line', 'polyline' and 'polygon' elements
Inherited:   see Inheritance of Painting Properties below
Percentages:   N/A
Media:   visual
Animatable:   yes
none
Indicates that no marker symbol shall be drawn at the given vertex (vertices).
<uri>
The <uri> is a URI reference to the 'marker' element which shall be used as the arrowhead symbol or polymarker at the given vertex or vertices. If the URI reference is not valid (e.g., it points to an object that is undefined or the object is not a 'marker' element), then the marker(s) shall not be drawn.

The 'marker' property specifies the marker symbol that shall be used for all points on the sets the value for all vertices on the given 'path' element or vector graphic shape. It is a short-hand for the three individual marker properties:

'marker'
Value:   see individual properties
Initial:   see individual properties
Applies to:   'path', 'line', 'polyline' and 'polygon' elements
Inherited:   see Inheritance of Painting Properties below
Percentages:   N/A
Media:   visual
Animatable:   yes

11.6.4 Details on how markers are rendered

Markers are drawn after the given object is filled and stroked.

For each marker that is drawn, a temporary new user coordinate system is established to that the marker will be positioned and sized correctly, as follows:

The rendering effect of a marker is as if the contents of the referenced 'marker' element were deeply cloned into a separate non-exposed DOM tree for each instance of the marker. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance of the marker.

For user agents that support Styling with CSS, the conceptual deep cloning of the referenced 'marker' element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade [CSS2-CASCADE] on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

Property inheritance, however, works as if the referenced element had been textually included as a deeply cloned child within the document tree. The referenced element inherits properties from the element that referenced the marker and any ancestors of that element. The marker instance does not inherit properties from the 'marker' element's original parents.

In the generated content, for each instance of a given marker, a 'g' is created which carries with it all property values resulting from the CSS cascade [CSS2-CASCADE] on the referencing element (exception: any marker properties are stripped off). Within this 'g' is another 'g' which carries with it all property values resulting from the CSS cascade [CSS2-CASCADE] on the 'marker' element. The original contents of the 'marker' element are deep-cloned within the inner 'g' element.

For illustrative purposes, we'll repeat the marker example shown earlier:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 
  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="4in" height="2in" 
     viewBox="0 0 4000 2000" >
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect x="10" y="10" width="3980" height="1980"
       style="fill:none; stroke:blue; stroke-width:10"/>
  <desc>Placing an arrowhead at the end of a path.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        style="fill:none; stroke:black; stroke-width:100; 
        marker-end:url(#Triangle)" />
</svg>

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

The rendering effect of the above file will be visually identical to the following:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 
  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="4in" height="2in" 
     viewBox="0 0 4000 2000" >

  <desc>File which produces the same effect
      as the marker example file, but without
      using markers.
  </desc>
  <rect x="10" y="10" width="3980" height="1980"
       style="fill:none; stroke:blue; stroke-width:10"/>
  <!-- The path draws as before, but without the marker properties -->
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        style="fill:none; stroke:black; stroke-width:100" />

  <!-- The following logic simulates drawing a marker 
       at final vertex of the path. -->

  <!-- First off, move the origin of the user coordinate system
       so that the origin is now aligned with the end point of the path. -->
  <g transform="translate(2500,1250)" >

    <!-- Rotate the coordinate system 45 degrees because
         the marker specified orient="auto" and the final segment
         of the path is going in the direction of 45 degrees. -->
    <g transform="rotate(45)" >

      <!-- Scale the coordinate system by the current value of
           the 'stroke-width' property, which is 100. -->
      <g transform="scale(100)" >

        <!-- Scale the coordinate system by
             (markerWidth / viewBoxWidth, markerHeight / viewBoxHeight)
             to achieve the effect of the 'viewBox' attribute on the 'marker'. -->
        <g transform="scale(.4,.3)" >

          <!-- Translate the coordinate system by (-refX, -refY) so that
               (refX,refY) within the marker will align with the vertex. -->
          <g transform="translate(0,-5)" >

            <!-- This 'g' element carries all
                 property values on the 'path' resulting from the CSS cascade. -->
            <g style="fill:none; stroke:black; stroke-width:100">

              <!-- This 'g' element carries all
                   property values on the original 'marker' element. -->
              <g style="fill:black; stroke:none">

                <!-- Expand out the contents of the 'marker' element. -->
                <path d="M 0 0 L 10 5 L 0 10 z" />
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

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

11.7 Rendering properties

The SVG user agent performs color interpolations and compositing in the following cases:

The 'color-interpolation' property specifies whether color interpolations and compositing shall be performed in the sRGB [SRGB] color space or in a (light energy linear) linearized RGB color space.

The conversion formulas between the sRGB color space (i.e., nonlinear with 2.2 gamma curve) and the linearized RGB color space (i.e., color values expressed as sRGB tristimulus values without a gamma curve) can be found in [SRGB]. For illustrative purposes, the following formula shows the conversion from sRGB to linearized RGB:

  R[sRGB] = R[sRGB-8bit] / 255
  G[sRGB] = G[sRGB-8bit] / 255
  B[sRGB] = B[sRGB-8bit] / 255

If R'[sRGB], G'[sRGB], B'[sRGB] <= 0.04045

  R[linearRGB] = R[sRGB] / 12.92
  G[linearRGB] = G[sRGB] / 12.92
  B[linearRGB] = B[sRGB] / 12.92

else if R'[sRGB], G'[sRGB], B'[sRGB] > 0.04045

  R[linearRGB] = ((R[sRGB] + 0.055) / 1.055) ^ 2.4
  G[linearRGB] = ((G[sRGB] + 0.055) / 1.055) ^ 2.4
  B[linearRGB] = ((B[sRGB] + 0.055) / 1.055) ^ 2.4

  R[linearRGB-8bit] = R[linearRGB] * 255
  G[linearRGB-8bit] = G[linearRGB] * 255
  B[linearRGB-8bit] = B[linearRGB] * 255

Out-of-range color values, if supported by the user agent, also are converted using the above formulas. (See Clamping values which are restricted to a particular range.)

'color-interpolation'
Value:   auto | sRGB | linearRGB | inherit
Initial:   sRGB
Applies to:   color interpolation and compositing operations
Inherited:   yes
Percentages:   N/A
Media:   visual
Animatable:   yes
auto
Indicates that the user agent can choose either the sRGB or linearRGB spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.
sRGB
Indicates that color interpolation should occur in the sRGB color space.
linearRGB
Indicates that color interpolation should occur in the linearized RGB color space as described above.

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:   color interpolation and compositing operations
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.

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:   all elements
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.

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.

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.8 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 leaf-node individually, never at the '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.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 
  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="7cm" height="2cm">
  <desc>Gradients apply to leaf nodes
  </desc>
  <g>
    <defs>
      <linearGradient id="MyGradient" gradientUnits="objectBoundingBox">
        <stop offset="0%" style="stop-color:#F60"/>
        <stop offset="100%" style="stop-color:#FF6"/>
      </linearGradient>
    </defs>
    <g style="fill:url(#MyGradient)">
      <rect x="1cm" y="1cm" width="2cm" height="1cm"/>
      <rect x="4cm" y="1cm" width="2cm" height="1cm"/>
   </g>
  </g>
</svg>

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


11.9 DOM interfaces

The following interfaces are defined below: SVGPaint, SVGMarkerElement.


Interface SVGPaint

The SVGPaint interface corresponds to basic type <paint> and represents the values of properties 'fill' and 'stroke'.


IDL Definition
interface SVGPaint : SVGColor { 
  // Paint Types
  const unsigned short SVG_PAINTTYPE_UNKNOWN               = 0;
  const unsigned short SVG_PAINTTYPE_RGBCOLOR              = 1;
  const unsigned short SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR     = 2;
  const unsigned short SVG_PAINTTYPE_NONE                  = 101;
  const unsigned short SVG_PAINTTYPE_CURRENTCOLOR          = 102;
  const unsigned short SVG_PAINTTYPE_URI_NONE              = 103;
  const unsigned short SVG_PAINTTYPE_URI_CURRENTCOLOR      = 104;
  const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR          = 105;
  const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR = 106;

  readonly attribute unsigned short paintType;
  readonly attribute DOMString      uri;

  void setUri ( in DOMString uri );
  void setPaint ( in unsigned short paintType, in DOMString uri, in DOMString rgbColor, in DOMString iccColor )
                  raises( SVGException );
};

Definition group Paint Types
Defined constants
SVG_PAINTTYPE_UNKNOWN The paint 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_PAINTTYPE_RGBCOLOR An sRGB color has been specified without an alternative ICC color specification.
SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR An sRGB color has been specified along with an alternative ICC color specification.
SVG_PAINTTYPE_NONE Corresponds to a 'none' value on a <paint> specification.
SVG_PAINTTYPE_CURRENTCOLOR Corresponds to a 'currentColor' value on a <paint> specification.
SVG_PAINTTYPE_URI_NONE A URI has been specified, along with either an explicit or an implicit 'none' as the backup paint method in case the URI is unavailable or invalid.
SVG_PAINTTYPE_URI_CURRENTCOLOR A URI has been specified, along with 'currentColor' as the backup paint method in case the URI is unavailable or invalid.
SVG_PAINTTYPE_URI_RGBCOLOR A URI has been specified, along with an sRGB color as the backup paint method in case the URI is unavailable or invalid.
SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR A URI has been specified, along with both an sRGB color and alternate ICC color as the backup paint method in case the URI is unavailable or invalid.
Attributes
readonly unsigned short paintType
The type of paint, identified by one of the constants above.
readonly DOMString uri
When the paintType specifies a URI, this attribute holds the URI string. When the paintType does not specify a URI, this attribute is null.
Methods
setUri
Sets the paintType to SVG_PAINTTYPE_URI_NONE and sets uri to the specified value.
Parameters
in DOMString uri The URI for the desired paint server.
No Return Value
No Exceptions
setPaint
Sets the paintType as specified by the parameters. If paintType requires a URI, then uri must be non-null and a valid string; otherwise, uri must be null. If paintType requires an RGBColor, then rgbColor must be a valid RGBColor object; otherwise, rgbColor must be null. If paintType requires an SVGICCColor, then iccColor must be a valid SVGICCColor object; otherwise, iccColor must be null.
Parameters
in unsigned short paintType One of the defined constants for paintType.
in DOMString uri The URI for the desired paint server, or null.
in DOMString rgbColor The specification of an sRGB color, or null.
in DOMString iccColor The specification of an ICC color, or null.
No Return Value
Exceptions
SVGException
SVG_INVALID_VALUE_ERR: Raised if one of the parameters has an invalid value.

Interface SVGMarkerElement

The SVGMarkerElement interface corresponds to the 'marker' element.


IDL Definition
interface SVGMarkerElement : 
                SVGElement,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGFitToViewBox { 

  // Marker Unit Types
  const unsigned short SVG_MARKERUNITS_UNKNOWN        = 0;
  const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1;
  const unsigned short SVG_MARKERUNITS_STROKEWIDTH    = 2;
  // Marker Orientation Types
  const unsigned short SVG_MARKER_ORIENT_UNKNOWN      = 0;
  const unsigned short SVG_MARKER_ORIENT_AUTO         = 1;
  const unsigned short SVG_MARKER_ORIENT_ANGLE        = 2;

  readonly attribute SVGAnimatedLength      refX;
  readonly attribute SVGAnimatedLength      refY;
  readonly attribute SVGAnimatedEnumeration markerUnits;
  readonly attribute SVGAnimatedLength      markerWidth;
  readonly attribute SVGAnimatedLength      markerHeight;
  readonly attribute SVGAnimatedEnumeration orientType;
  readonly attribute SVGAnimatedAngle      orientAngle;

  void setOrientToAuto (  );
  void setOrientToAngle ( in SVGAngle angle );
};

Definition group Marker Unit Types
Defined constants
SVG_MARKERUNITS_UNKNOWN The marker unit 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_MARKERUNITS_USERSPACEONUSE The value of attribute markerUnits is 'userSpaceOnUse'.
SVG_MARKERUNITS_STROKEWIDTH The value of attribute markerUnits is 'strokeWidth'.
Definition group Marker Orientation Types
Defined constants
SVG_MARKER_ORIENT_UNKNOWN The marker orientation 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_MARKER_ORIENT_AUTO Attribute orient has value 'auto'.
SVG_MARKER_ORIENT_ANGLE Attribute orient has an angle value.
Attributes
readonly SVGAnimatedLength refX
Corresponds to attribute refX on the given 'marker' element.
readonly SVGAnimatedLength refY
Corresponds to attribute refY on the given 'marker' element.
readonly SVGAnimatedEnumeration markerUnits
Corresponds to attribute markerUnits on the given 'marker' element. One of the Marker Units Types defined above.
readonly SVGAnimatedLength markerWidth
Corresponds to attribute markerWidth on the given 'marker' element.
readonly SVGAnimatedLength markerHeight
Corresponds to attribute markerHeight on the given 'marker' element.
readonly SVGAnimatedEnumeration orientType
Corresponds to attribute orient on the given 'marker' element. One of the Marker Orientation Types defined above.
readonly SVGAnimatedAngle orientAngle
Corresponds to attribute orient on the given 'marker' element. If markerUnits is SVG_MARKER_ORIENT_ANGLE, the angle value for attribute orient; otherwise, it will be set to zero.
Methods
setOrientToAuto
Sets the value of attribute orient to 'auto'.
No Parameters
No Return Value
No Exceptions
setOrientToAngle
Sets the value of attribute orient to the given angle.
Parameters
in SVGAngle angle The angle value to use for attribute orient.
No Return Value
No Exceptions