previous next contents properties index

# 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:

- a single color
- a gradient (linear or radial)
- a pattern (vector or image, possibly tiled)
- custom paints available via extensibility

SVG uses the general notion of a paint server. Gradients and patterns are just specific types of paint servers. For example, first you can define a linear gradient by including a 'linearGradient' element with an ID and then reference that ID in a 'fill' or 'stroke' property:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="3in">
      <desc>Linear gradient example
      </desc>
      <g>
        <defs>
          <linearGradient id="MyGradient">
            <stop offset="0%" style="color:#F60"/>
            <stop offset="70%" style="color:#FF6"/>
          </linearGradient>
        </defs>
        <rect style="fill: url(#MyGradient)" width="20" height="15.8"/>
      </g>
    </svg>

Download this example

## 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>[,<icccolorvalue>]*)]
  <color> is the explicit color (in the sRGB [SRGB] color space) to be used to fill the current object. SVG supports all of CSS2's <color> specifications. If an optional ICC color specification is provided, then the user agent searches the color profile description database for an @color-profile 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 list 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 and @color-profile.
<uri>
[ none |
currentColor |
<color> [icc-color(<name>,<icccolorvalue>[,<icccolorvalue>]*)]]
  The <uri> is how you identify a fancy paint style such as a gradient, a pattern or a custom paint from 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>[,<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: | currentColor
  Applies to: | all elements
  Inherited: | see Inheritance of Painting Properties below
  Percentages: | N/A
  Media: | visual
  Animatable: | yes

Note that graphical objects that are not closed (e.g., a 'path' without a closepath at the end or a 'polyline') still can be filled. The fill operation automatically closes all open subpaths by connecting the last point of the subpath with the first point of the subpath before painting the fill.

'fill-rule'

  Value: | evenodd | nonzero | inherit
  Initial: | evenodd
  Applies to: | all elements
  Inherited: | yes
  Percentages: | N/A
  Media: | visual
  Animatable: | yes

evenodd
nonzero

'fill-opacity'

  Value: | <opacity-value> | inherit
  Initial: | 100%
  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

'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 Processing rules for CSS units and percentages.)

'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) that are stroked. when they are stroked.

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

'stroke-miterlimit'

  Value: | <miterlimit> | inherit
  Initial: | 8
  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.

'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 space- or comma-separated <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 space- or comma-separated <length>'s which can be in user units or in any of the CSS units, including percentages. A percentage represents a distance as a percentage of the current viewport. (See Processing rules for CSS units and percentages.)

'stroke-dashoffset'

  Value: | <dashoffset> | inherit
  Initial: | 0
  Applies to: | all elements
  Inherited: | yes
  Percentages: | Yes. See below.
  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 Processing rules for CSS units and percentages.)

'stroke-opacity'

  Value: | <opacity-value> | inherit
  Initial: | 100%
  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 Markers

### 11.5.1 Introduction

To use a marker symbol for arrowheads or polymarkers, you need to define a 'marker' element which defines the marker symbol and then refer to that 'marker' element using the various marker properties (i.e., 'marker-start', 'marker-end', 'marker-mid' or 'marker') on the given 'path' element or vector graphic shape. Here is an example which draws a triangular marker symbol that is drawn as an arrowhead at the end of a path:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="4in"
         viewBox="0 0 4000 4000" >
      <defs>
        <marker id="Triangle"
          viewBox="0 0 10 10" refX="0" refY="5"
          markerWidth="1.25" markerHeight="1.75"
          orient="auto">
          <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>
      </defs>
      <desc>Placing an arrowhead at the end of a path.
      </desc>
      <path d="M 1000 1000 L 2000 1000 L 3000 2000"
            style="fill:none; stroke:black; stroke-width:100;
            marker-end:url(#Triangle)" />
    </svg>

Download this example

### 11.5.2 The 'marker' element

The 'marker' element defines the graphics that is to be used for drawing arrowheads or polymarkers on a given 'path' element or vector graphic shape.

    <!ENTITY % markerExt "" >
    <!ELEMENT marker (%descTitleDefs;,
                      (path|text|rect|circle|ellipse|line|polyline|polygon|
                       use|image|svg|g|switch|a
                       %ceExt;%markerExt;)*) >
    <!ATTLIST marker
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      externalResourcesRequired %Boolean; #IMPLIED
      refX %Coordinate; #IMPLIED
      refY %Coordinate; #IMPLIED
      viewBox %ViewBoxSpec; #IMPLIED
      preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
      markerUnits (strokeWidth | userSpace | userSpaceOnUse) "strokeWidth"
      markerWidth  %Length; "3"
      markerHeight %Length; "3"
      orient CDATA "0"
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs;
      %FinalFormSVG-ViewportAttrs; >

Attribute definitions:

markerUnits = "strokeWidth | userSpace | userSpaceOnUse"
  markerUnits indicates how to interpret the values of markerWidth and markerHeight (described as follows).
  If markerUnits="strokeWidth", then markerWidth and markerHeight represent scale factors relative to the stroke width in place for graphic object referencing the marker.
  If markerUnits="userSpace", then markerWidth and markerHeight represent values in the user coordinate system in place for the graphic object referencing the marker.
  If markerUnits="userSpaceOnUse", then markerWidth and markerHeight represent values in the current user coordinate system in place at the time when the 'marker' element is referenced (i.e., the user coordinate system for the element referencing the 'marker' element via the 'marker', 'marker-start', 'marker-mid' or 'marker-end' property). represent values in the user coordinate system in place for the graphic object referencing the marker.
  Animatable: yes.
refX = "<coordinate>"
  The x-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.
  Animatable: yes.
refY = "<coordinate>"
  The y-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.
  Animatable: yes.
markerWidth = "<length>"
  Represents the width of the temporary viewport that is to be created when drawing the marker. Default value is "3".
  Animatable: yes.
markerHeight = "<length>"
  Represents the height of the temporary viewport that is to be created when drawing the marker. Default value is "3".
  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 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. The default value is an angle of zero.
  Animatable: yes (non-additive, 'set' and 'animate' elements only).

Attributes defined elsewhere:
  %stdAttrs;, %langSpaceAttrs;, viewBox, preserveAspectRatio, %StylableSVG-StyleAttribute;.

Markers are drawn such that their reference point (i.e., attributes ref-x and ref-y) is positioned at the given vertex.

### 11.5.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 ID of a 'marker' element which shall be used as the arrowhead symbol or polymarker at the given vertex (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.5.4 Details on how markers are rendered

The following provides details on how markers are rendered:

- Markers are drawn after the given object is filled and stroked.
- Each marker is drawn on the path by first creating a temporary viewport such that the origin of the viewport coordinate system is at the given vertex and the axes are aligned according to the orient attribute on the 'marker' element.
- The width and height of the viewport is established by evaluating the values of <markerUnits>, <markerWidth> and <markerHeight> and calculating temporary values computed-width and computed-height in the user coordinate system of the object referencing the markers. computed-width and computed-height are used to determine the dimensions of the temporary viewport.
- The marker is drawn into the viewport.

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

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="4in"
         viewBox="0 0 4000 4000" >
      <defs>
        <marker id="Triangle"
          viewBox="0 0 10 10" refX="0" refY="5"
          markerWidth="1.25" markerHeight="1.75"
          orient="auto">
          <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>
      </defs>
      <desc>Placing an arrowhead at the end of a path.
      </desc>
      <path d="M 1000 1000 L 2000 1000 L 3000 2000"
            style="fill:none; stroke:black; stroke-width:100;
            marker-end:url(#Triangle)" />
    </svg></svg>

Download this example

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 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="4in"
         viewBox="0 0 4000 4000" >
      <defs>
        <!-- Note: to illustrate the effect of "marker",
          replace "marker" with "symbol" and remove the various
          marker-specific attributes -->
        <symbol id="Triangle"
          viewBox="0 0 10 10">
          <path d="M 0 0 L 10 5 L 0 10 z" />
        </symbol>
      </defs>
      <desc>File which produces the same effect
          as the marker example file, but without
          using markers.
      </desc>
      <!-- The path draws as before, but without the marker properties -->
      <path d="M 1000 1000 L 2000 1000 L 3000 2000"
            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(3000 2000)" >

        <!-- Now, 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)" >

          <!-- Establish a new viewport with an <svg> element.
               The width/height of the viewport are 1.25 and 1.75 times
               the current stroke-width, respectively. Since the
               current stroke-width is 100, the viewport's width/height
               is 125 by 175. Apply the viewBox attribute
               from the <marker> element onto this <svg> element.
               Transform the marker symbol to align (refX,refY) with
               the origin of the viewport. -->
          <svg width="125" height="175"
               viewBox="0 0 10 10"
               transform="translate(0,-5)" >

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

Download this example

## 11.6 Rendering properties

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

- when rendering gradients
- when performing color animations (see 'animateColor')
- when performing alpha blending/compositing of graphics elements into the current background
- when performing various filter effects

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 sRGB color space and linearized RGB color space is can be found in [SRGB]. The following formula shows the conversion from sRGB to linearized RGB:

      R'[sRGB] = R[sRGB] / 255
      G'[sRGB] = G[sRGB] / 255
      B'[sRGB] = B[sRGB] / 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

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 linearRGBspaces 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.
optimizeSpeed
  Indicates that the user agent shall emphasize rendering speed over quality. This option will sometimes cause the user agent to use a bilinear image resampling algorithm.
optimizeQuality
  Indicates that the user agent shall emphasize quality over rendering speed. This option will sometimes cause the user agent to use a bicubic image resampling algorithm.

The 'visibility' indicates whether a given object shall be rendered at all.

'visibility'

  Value: | visible | hidden | inherit
  Initial: | visible
  Applies to: | all elements
  Inherited: | yes
  Percentages: | N/A
  Media: | visual
  Animatable: | yes

visible
  The current object is drawn.
hidden
  The current object is not drawn.

## 11.7 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, two distinct gradients are painted (one for each rectangle):

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="3in">
      <desc>Gradients apply to leaf nodes
      </desc>
      <g>
        <defs>
          <linearGradient id="MyGradient">
            <stop offset="0%" style="color:#F60"/>
            <stop offset="70%" style="color:#FF6"/>
          </linearGradient>
        </defs>
        <g style="fill: url(#MyGradient)">
          <rect width="20" height="15.8"/>
          <rect width="35" height="8"/>
       </g>
      </g>
    </svg>

Download this example

## 11.8 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
        constant unsigned short SVG_PAINTTYPE_UNKNOWN               = 0;
        constant unsigned short SVG_PAINTTYPE_RGBCOLOR              = 1;
        constant unsigned short SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR     = 2;
        constant unsigned short SVG_PAINTTYPE_NONE                  = 101;
        constant unsigned short SVG_PAINTTYPE_CURRENTCOLOR          = 102;
        constant unsigned short SVG_PAINTTYPE_URI_NONE              = 103;
        constant unsigned short SVG_PAINTTYPE_URI_CURRENTCOLOR      = 104;
        constant unsigned short SVG_PAINTTYPE_URI_RGBCOLOR          = 105;
        constant unsigned short SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR = 106;

        readonly attribute unsigned short paintType;
        readonly attribute DOMString      uri;
        readonly attribute unsigned short animatedPaintType;
        readonly attribute DOMString      animatedUri;

        void setUri ( in DOMString uri )
                        raises( SVGException );
        void setPaint ( in unsigned short paintType, in DOMString uri, in RGBColor rgbColor, in SVGICCColor 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.
  readonly unsigned short animatedPaintType
    If the given attribute or property is being animated, contains the current animated value of paintType. If the given attribute or property is not currently being animated, contains the same value as paintType.
  readonly DOMString animatedUri
    If the given attribute or property is being animated, contains the current animated value of uri. If the given attribute or property is not currently being animated, contains the same value as uri.
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
    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if a parameter is of the wrong type.

  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 RGBColor rgbColor |  | The specification of an sRGB color, or null.
      in SVGICCColor iccColor |  | The specification of an ICC color, or null.

    No Return Value
    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if a parameter is of the wrong type.

### Interface SVGMarkerElement

The SVGMarkerElement interface corresponds to the 'marker' element.

IDL Definition

      interface SVGMarkerElement : SVGElement, SVGLangSpace, SVGFitToViewBox {
        // Marker Unit Types
        constant unsigned short SVG_MARKERUNITS_UNKNOWN        = 0;
        constant unsigned short SVG_MARKERUNITS_USERSPACE      = 1;
        constant unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 2;
        constant unsigned short SVG_MARKERUNITS_STROKEWIDTH    = 3;
        // Marker Orientation Types
        constant unsigned short SVG_MARKER_ORIENT_UNKNOWN      = 0;
        constant unsigned short SVG_MARKER_ORIENT_AUTO         = 1;
        constant unsigned short SVG_MARKER_ORIENT_ANGLE        = 2;

                 attribute DOMString className;
        readonly attribute unsigned short markerUnits;
        readonly attribute unsigned short orientType;
        readonly attribute SVGAngle orientAngle;
                 attribute SVGLength refX;
                 attribute SVGLength refY;
                 attribute SVGLength markerWidth;
                 attribute SVGLength markerHeight;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
                 FINALFORMSVGViewportAttrs;
      #endif FINALFORMSVG

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

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_USERSPACE |  | The value of attribute markerUnits is 'userSpace'.
    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
  DOMString className
    Corresponds to attribute class on the given element.
  readonly unsigned short markerUnits
    Corresponds to attribute markerUnits on the given 'marker' element. One of the Marker Units Types defined above.
  readonly unsigned short orientType
    Corresponds to attribute orient on the given 'marker' element. One of the Marker Orientation Types defined above.
  readonly SVGAngle 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.
  SVGLength refX
    Corresponds to attribute refX on the given 'marker' element.
  SVGLength refY
    Corresponds to attribute refY on the given 'marker' element.
  SVGLength markerWidth
    Corresponds to attribute markerWidth on the given 'marker' element.
  SVGLength markerHeight
    Corresponds to attribute markerHeight on the given 'marker' element.
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
    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if a parameter is of the wrong type.

previous next contents properties index