Chapter 12: Painting: Filling, Stroking and Marker Symbols

12.1. Introduction

12.1.1. Definitions

fill

The operation of painting the interior of a shape or the interior of the character glyphs in a text string.

stroke

The operation of painting the outline of a shape or the outline of character glyphs in a text string.

Graphical elements that define a shape – ‘path’ elements, basic shapes, and text content elements – are rendered by being filled, which is painting the interior of the object, and stroked, which is painting along the outline of the object. Filling and stroking are both painting operations. SVG 2 supports a number of different paints that the fill and stroke of a graphical element can be painted with:

• a single color,
• a gradient (linear, radial, or mesh),
• a pattern (vector or raster, possibly tiled),
• a hatch,
• other images as specified using CSS Image Value syntax [CSS3IMAGES].

The paint to use for filling and stroking an element is specified using the fill and stroke properties. The following section describes the different values that can be used for these properties.

Other properties, such as fill-opacity and stroke-width, also have an effect on the way fill and stroke paint is applied to the canvas. The Fill properties and Stroke properties sections below describe these properties.

Some graphics elements – ‘path’ elements and basic shapes – can also have marker symbols drawn at their vertices or at other positions along the path that they describe. The Markers section below describes how markers can be defined and used.

SVG 2 adds markers on shapes. Resolved at Tokyo F2F.

12.2. Specifying paint

The fill and stroke properties, defined below, are used to specify the paint used to render the interior of and the stroke around shapes and text. A paint specification describes a way of putting color values on to the canvas and is composed of one or more paint layers. Four types of paints within these paint layers are supported: solid colors, gradients, patterns, and hatches.

A <paint> value is defined as follows:

<paint> = [ [ <paint-layer> , ]* <final-paint-layer> ] | context-fill | context-stroke

<paint-layer> = <paint-source>

<final-paint-layer> = <paint-source> || <color>

<paint-source> = none | child | child(<integer>) | <url>

The ability to apply more than one paint layer to an element is new in SVG 2.

A <paint> value can either be a comma-separated list of paint layers, or one of the context keywords, which reference the paint value of fill or stroke from a context element. Each paint layer can take one of the following values:

<url>

A URL reference to a paint server element, which is an element that defines a paint server: ‘hatch’, ‘linearGradient’, ‘meshgradient’, ‘pattern’, ‘radialGradient’ and ‘solidcolor’.

child

A reference to the last child paint server element of the element being painted.

child(n)

A reference to the nth child paint server element of the element being painted.

none

No paint is applied in this layer.

The list of paint layers describes the sequence of paint servers and an optional color to render within the fill or stroke shape. These paint layers are rendered, one after another, in reverse order – that is, the right-most paint layer (the <final-paint-layer> value) is rendered first, then the next paint layer to the left is rendered, and so on proceeding left. Multiple paint layers can be used to build up a composite paint made up of more than one semi-transparent paint.

The reverse rendering order used here follows the rendering order of the CSS background properties.

<rect width="100" height="100" fill="url(#MyHatch1), url(#MyHatch2), powderblue">
  

The rightmost rectangle is filled by stacking the paints shown in the other rectangles.

The child keyword value references the last child paint server element and the child(n) function references the nth child paint server element (where the first has index 1). A value for n less than 1 is invalid and causes the entire property value to be invalid.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50" x="25" y="25" fill="child, skyblue" stroke="grey">
        <pattern viewBox="0 0 100 100" width="20%" height="20%">
            <path d="M0,0 h40 L100,60 v40 z m 0,60 v40 h40 z" fill="red" />
        </pattern>
        <pattern viewBox="0 0 100 100" width="20%" height="20%">
            <path d="M0,0 h40 L100,60 v40 z m 0,60 v40 h40 z" fill="grey" />
        </pattern>
    </rect>
</svg>

The paint server used to fill the ‘rect’ element is a child element of the shape being filled. Note that there are two child paint servers and the last paint server is the one matched to the child keyword.

A <final-paint-layer> allows a paint server reference, a <color> value, or both to be given. When both are given, the <color> value is a fallback color to use if the paint server reference in the layer is invalid (due to pointing to an element that does not exist or which is not a valid paint server). When only a paint server reference is given, it is used as the paint just as in any other <paint-layer>. When only a <color> is given, the color is used as the paint unconditionally.

Note that this is slightly different from CSS background syntax, where a background image and color specified in the final layer of a background value will result in both the image and color being rendered. The fallback nature of the color in SVG <paint> values is needed for compatibility with SVG 1.1, which supported only a single paint server reference plus a fallback color.

If a paint server reference in a <paint-layer> is invalid, then no paint is rendered for that layer.

This is changed from SVG 1.1 behavior where the document is in error if a paint server reference is invalid and there is no fallback color specified.

<rect width="100" height="100" fill="url(#MyHatch1), url(#MyHatch2) powderblue">
  

The left rectangle shows the expected fill if both MyHatch1 and MyHatch2 are defined. The right rectangle shows the expected fill if MyHatch1 is defined but MyHatch2 is missing.

For a <color> value in the final paint layer, all color syntaxes defined in CSS Color Module Level 3 must be supported, including rgb(), rgba(), hsl(), hsla(), the extended color keywords and the currentColor value.

The context-fill and context-stroke values are a reference to the paint layers generated for the fill or stroke property, respectively, of the context element of the element being painted. The context element of an element is defined as follows:

• If the element is within a ‘marker’, and is being rendered as part of that marker due to being referenced via a marker property, then the context element is the element referencing that ‘marker’.
• If the element is within a sub-tree that is instantiated with a ‘use’ element, then the context element is that ‘use’ element.
• Otherwise, there is no context element.

If there is no context element and these keywords are used, then no paint is applied.

When the context paint layers include paint server references, then the coordinate space and the bounding box used to scale the paint server elements and content are those of the context element. In other words, any gradients and patterns referenced with these keywords should be continuous from the main shape to the markers, or from one element within a use-element shadow tree to another.

If the referenced value of fill or stroke is a context-fill and context-stroke value, then those contextual referencing is recursive.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path {
      fill: none;
      stroke-width: 4px;
      marker: url(#diamond);
    }
  </style>
  <path d="M 10,50 v -20 h 40 v -20" stroke="red"/>
  <path d="M 30,70 v -20 h 40 v -20" stroke="green"/>
  <path d="M 50,90 v -20 h 40 v -20" stroke="blue"/>
  <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6"
          markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3"
            fill="white" stroke="context-stroke" stroke-width="2"/>
  </marker>
</svg>

The marker is defined using a shape whose stroke is set to context-stroke. This causes the marker to take on the color of each ‘path’ element that uses the marker.

12.3. The effect of the ‘color’ property

See the CSS Color Module Level 3 specification for the definition of color. [CSS3COLOR]

The color property is used to provide a potential indirect value, currentColor, for the fill, stroke, solid-color, stop-color, flood-color and lighting-color properties. The property has no other effect on SVG elements.

<!DOCTYPE html>
<style>
body { color: #468; font: 16px sans-serif }
svg { border: 1px solid #888; background-color: #eee }
</style>
<p>Please see the diagram below:</p>
<svg width="200" height="100">
  <g fill="currentColor">
    <text x="70" y="55" text-anchor="end">START</text>
    <text x="130" y="55">STOP</text>
    <path d="M 85,45 h 25 v -5 l 10,10 -10,10 v -5 h -25 z"/>
  </g>
</svg>

12.4. Fill properties

12.4.1. Specifying fill paint: the ‘fill’ property

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.

12.4.2. Winding rule: the ‘fill-rule’ property

The fill-rule property indicates the algorithm (or winding rule) 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:

The effect of a nonzero fill rule on paths with self-intersections and enclosed subpaths.

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:

The effect of an evenodd fill rule on paths with self-intersections and enclosed subpaths.

The above descriptions 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.

12.4.3. Fill paint opacity: the ‘fill-opacity’ property

fill-opacity specifies the opacity of the painting operation used to paint the interior the current object. (See Painting shapes and text.) A value of 0 means fully transparent, and a value of 1 means fully opaque.

See also the opacity property, which specifies group opacity.

12.5. Stroke properties

In this section, we define a number of properties that allow the author to control different aspects of a stroke, including its paint, thickness, use of dashing, and joining and capping of path segments.

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.

12.5.1. Specifying stroke paint: the ‘stroke’ property

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

Note that when stroking a ‘path’ element, any subpath consisting of a moveto but no following line drawing command will not be stroked. Any other type of zero-length subpath, such as 'M 10,10 L 10,10' or 'M 30,30 Z' will also not be stroked if the stroke-linecap property has a value of butt. See the definition of the stroke shape below for the details of computing the stroke of a path.

12.5.2. Stroke paint opacity: the ‘stroke-opacity’ property

The stroke-opacity property specifies the opacity of the painting operation used to stroke the current object. (See Painting shapes and text.) As with fill-opacity, a value of 0 means fully transparent, and a value of 1 means fully opaque.

See also the opacity property, which specifies group opacity.

12.5.3. Stroke width: the ‘stroke-width’ property

This property specifies the width of the stroke on the current object. A zero value causes no stroke to be painted. A negative value is invalid.

12.5.4. Drawing caps at the ends of strokes: the ‘stroke-linecap’ property

stroke-linecap specifies the shape to be used at the end of open subpaths when they are stroked, and the shape to be drawn for zero length subpaths whether they are open or closed. The possible values are:

butt

This value indicates that the stroke for each subpath does not extend beyond its two endpoints. A zero length subpath will therefore not have any stroke.

round

This value indicates that at each end of each subpath, the shape representing the stroke will be extended by a half circle with a diameter equal to the stroke width. If a subpath, whether open or closed, has zero length, then the resulting effect is that the stroke for that subpath consists solely of a full circle centered at the subpath's point.

square

This value indicates that at the end of each subpath, the shape representing the stroke will be extended by a rectangle with the same width as the stroke width and whose length is half of the stroke width. If a subpath, whether open or closed, has zero length, then the resulting effect is that the stroke for that subpath consists solely of a square with side length equal to the stroke width, centered at the subpath's point, and oriented such that two of its sides are parallel to the effective tangent at that subpath's point. See ‘path’ element implementation notes for details on how to determine the tangent at a zero-length subpath.

The three types of line caps.

See the definition of the cap shape below for a more precise description of the shape a line cap will have.

12.5.5. Controlling line joins: the ‘stroke-linejoin’ and ‘stroke-miterlimit’ properties

stroke-linejoin specifies the shape to be used at the corners of paths or basic shapes when they are stroked. For further details see the path implementation notes.

miter

This value indicates that a sharp corner is to be used to join path segments. The corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect. If the stroke-miterlimit is exceeded, the line join falls back to bevel (see below).

miter-clip

This value is the same as miter but if the stroke-miterlimit is exceeded, the miter is clipped at a distance equal to half the stroke-miterlimit value multiplied by the stroke width from the intersection of the path segments (see below).

round

This value indicates that a round corner is to be used to join path segments. The corner is a circular sector centered on the join point.

bevel

This value indicates that a bevelled corner is to be used to join path segments. The bevel shape is a triangle that fills the area between the two stroked segments.

arcs

This value indicates that an arcs corner is to be used to join path segments. The arcs shape is formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point.

The miter-clip and arcs values are new in SVG 2. The miter-clip value offers a more consistent presentation for a path with multiple joins as well as better behavior when a path is animated. The arcs value provides a better looking join when the path segments at the join are curved.

Adding 'arcs' line join was resolved at the Rigi Kaltbad group meeting.

Adding 'miter-clip' line join was resolved at the Sydney (2015) group meeting.

Four types of line joins.

When two line segments meet at a sharp angle and a value of miter, miter-clip, or arcs has been specified for stroke-linejoin, it is possible for the join to extend far beyond the thickness of the line stroking the path. The stroke-miterlimit imposes a limit on the extent of the line join.

<number>

The limit on the extent of a miter, miter-clip, or arcs line join as a multiple of the stroke-width value. The value of stroke-miterlimit must be a <number> greater than or equal to 1. Any other value is an error (see Error processing).

For the miter or the miter-clip values, given the angle θ between the segments in local coordinate system, the miter length is calculated by:

miter length = stroke-width / sin(theta / 2)

Historically, the miter length is defined as the distance from the inside stroke edge of the intersecting path segments to the tip of the miter. In practice, this is followed only for straight path segments. The above definition of miter length based on angles depends only on the tangents to the path segments at the join and thus gives consistent results independent of the curvature of the path segments. To be consistent with this definition, the clipping point of the miter-clip and arcs line joins is at a distance or arc length equal to half the stroke-miterlimit times the stroke width from the point the two path segments join.

Left: Historical definition of miter length. Right: Two different paths with the same tangents to the path at the point where the path segments join. The behavior of the miter join (fallback to bevel or clipping position) is the same for both paths. It does not depend on the position where the inside stroked edges intersect.

If the miter length divided by the stroke width exceeds the stroke-miterlimit then for the value:

miter

the join is converted to a bevel;

miter-clip

the miter is clipped by a line perpendicular to the line bisecting the angle between the two path segments at a distance of half the value of miter length from the intersection of the two path segments.

Effect on line join when stroke-miterlimit is exceeded. The olive-green dashed lines shows the position of the miter limit when the stroke-miterlimit value is 3. The gray regions shows what the joins would look like without a miter limit.

For the arcs value, the miter length is calculated along a circular arc that is tangent to the line bisecting the angle between the two segments at the point the two segments intersect and passes through the end point of the join. The line join is clipped, if necessary, by a line perpendicular to this arc at an arc length from the intersection point equal to half the value of the stroke-miterlimit value multiplied by the stroke width.

The effect of 'stroke-miterlimit' on an 'arcs' line join was resolved at Sydney (2015) group meeting.

See the definition of the line join shape below for a more precise description of the shape a line join will have.

12.5.6. Dashing strokes: the ‘stroke-dasharray’ and ‘stroke-dashoffset’ properties

where:

<dasharray> = [ <length> | <percentage> | <number> ]#*

The stroke-dasharray property controls the pattern of dashes and gaps used to form the shape of a path's stroke.

none

Indicates that no dashing is used.

<dasharray>

Specifies a dashing pattern to use. A <dasharray> is a list of comma and/or white space separated lengths or percentages. Each value specifies a length along the path for which the stroke is to be painted (a dash) and not painted (a gap). The first value and every second value in the list after it specifies the length of a dash, and every other value specifies the length of a gap between the dashes. If the list has an odd number of values, then it is repeated to yield an even number of values. (Thus, the rendering behavior of stroke-dasharray: 5,3,2 is equivalent to stroke-dasharray: 5,3,2,5,3,2.)

The resulting even-length dashing pattern is repeated along each subpath. The dashing pattern is reset and begins again at the start of each subpath.

If any value in the list is negative, the <dasharray> value is invalid. If all of the values in the list are zero, then the stroke is rendered as a solid line without any dashing.

A dashed stroke. The dashing pattern is 20,10. The red line shows the actual path that is stroked.

The ‘pathLength’ attribute on a ‘path’ element affects stroke-dasharray: each dash and gap length is interpreted relative to the author's path length as specified by ‘pathLength’.

The stroke-dashoffset property specifies the distance into the repeated dash pattern to start the stroke dashing at the beginning of the path. If the value is negative, then the effect is the same as dash offset d:

d = s - (abs(stroke-dashoffset) mod s)

where s is the sum of the dash array values.

A dashed stroke with a non-zero dash offset. The dashing pattern is 20,10 and the dash offset is 15. The red line shows the actual path that is stroked.

Like stroke-dasharray, stroke-dashoffset is interpreted relative to the author's path length as specified by the ‘pathLength’ attribute on a ‘path’ element.

The example below shows how a ‘pathLength’ that is greatly different from the actual path length can be used to control stroke dashing more easily.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="150">
  <defs>
    <path id="p" d="M -50,0 A 50,50 0 0 0 50,0 A 50,50 0 0 0 -50,0 z"
          pathLength="80"/>
    <g id="chip" stroke-width="10">
      <circle cy="5" r="55" fill="#000" fill-opacity="0.15" stroke="none"/>
      <use xlink:href="#p"/>
      <use xlink:href="#p" fill="none" stroke="#eee" stroke-width="10"
           stroke-dasharray="10 10" stroke-dashoffset="5"/>
      <g fill="none" stroke-width="5" stroke-dasharray="0 20" stroke-linecap="round">
        <use xlink:href="#p" stroke="#eee" stroke-dashoffset="10"/>
        <use xlink:href="#p" stroke-dashoffset="0"/>
      </g>
      <circle r="40" fill="#000" fill-opacity="0.15"
              stroke-width="2" stroke="white"/>
    </g>
  </defs>
  <rect width="100%" height="100%" fill="#063"/>
  <use xlink:href="#chip" x="140" y="75" fill="#00c" stroke="#00c"/>
  <use xlink:href="#chip" x="160" y="85" fill="#000" stroke="#000"/>
  <use xlink:href="#chip" x="170" y="65" fill="#c00" stroke="#c00"/>
</svg>

The four broad white dashes and the eight small circular dashes around each chip are placed relative to an author specified ‘pathLength’ of '80', which makes the desired stroke-dasharray and stroke-dashoffset values easy to compute.

See the definition of dash positions below for a more precise description of positions along a path that dashes will be placed.

12.5.7. Computing the shape of the stroke

The stroke shape of an element is the shape that is filled by the stroke property. Since ‘text’ elements can be rendered in multiple chunks, each chunk has its own stroke shape. The following algorithm describes the ideal stroke shape of a ‘path’, basic shape or individual ‘text’ chunk is, taking into account the stroking properties above. The ideal stroke shape described defines a best case implementation, but implementations are given some leeway to deviate from this description for performance reasons.

Authors should be aware that the shape of a stroke may in some cases, such as at extremely tight curves, differ across platforms.

An example of how the shape painted for stroke may differ across platforms.

The above example shows the possible rendered results for the following two SVG paths:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<path d="M 1,3 C 8,2 8,6 7,6" stroke-width="4" fill="none" stroke="skyblue"/>
<path d="M 1,3 C 8,2 8,6 7,6" stroke-width="0.075" fill="none" stroke="black"/>
</svg>

1. Let shape be an empty shape.
2. If stroke-width > 0, then:
   1. Let scale be a scale factor for the dash pattern. If we are computing the stroke shape of a basic shape or an individual ‘text’ chunk, then scale is 1. Otherwise, it is determined as follows:
      1. Let length be the user agent's computed length of the ‘path’.
      2. Let authorlength be the value of the ‘pathLength’ attribute on the ‘path’ element.
      3. scale is authorlength / length.
   2. Let path be the equivalent path of the element (or the individual chunk of a ‘text’ element).
   3. For each subpath of path:
      1. Let positions be the dash positions for the subpath.
      2. For each pair <start, end> in positions:
         1. Scale start and end by scale.
         2. Let dash be the shape that includes, for all distances between start and end along the subpath, all points that lie on the line perpendicular to the subpath at that distance and which are within distance stroke-width of the point on the subpath at that position.
         3. Set dash to be the union of dash and the starting cap shape for the subpath at position start.
         4. Set dash to be the union of dash and the ending cap shape for the subpath at position end.
         5. Let index and last be the indexes of the path segments in the subpath at distance start and end along the subpath.

            It does not matter whether any zero length segments are included when choosing index and last.

         6. While index < last:
            1. Set dash to be the union of dash and the line join shape for the subpath at segment index index.
            2. Set index to index + 1.
         7. Set shape to be the union of shape and stroke.
3. Return shape.

The dash positions for a given subpath of the equivalent path of a ‘path’ or basic shape is a sequence of pairs of values, which represent the starting and ending distance along the subpath for each of the dashes that form the subpath's stroke. It is determined as follows:

1. Let pathlength be the length of the subpath.
2. Let dashes be the list of values of stroke-dasharray on the element, converted to user units, repeated if necessary so that it has an even number of elements; if the property has the value none, then the list has a single value 0.
3. Let count be the number of values in dashes.
4. Let sum be the sum of the values in dashes.
5. If sum = 0, then return a sequence with the single pair <0, pathlength>.
6. Let positions be an empty sequence.
7. Let offset be the value of the stroke-dashoffset property on the element.
8. If offset is negative, then set offset to sum − abs(offset).
9. Set offset to offset mod sum.
10. Let index be the smallest integer such that sum(dashes_i, 0 ≤ i ≤ index) ≥ offset.
11. Let dashlength be min(sum(dashes_i, 0 ≤ i ≤ index) − offset, pathlength).
12. If index mod 2 = 0, then append to positions the pair <0, dashlength>.
13. Let position be dashlength.
14. While position < pathlength:
    1. Set index to (index + 1) mod count.
    2. Let dashlength be min(dashes_index, pathlength − position).
    3. If index mod 2 = 0, then append to positions the pair <position, position + dashlength>.
    4. Set position to position + dashlength.
15. Return positions.

The starting and ending cap shapes at a given position along a subpath are determined as follows:

1. If stroke-linecap is butt, then return an empty shape.
2. Otherwise, if stroke-linecap is round, then:
   1. If this is a starting cap, then return a semicircle of diameter stroke-width positioned such that:
      • The subpath that the semicircle is relative to is the subpath starting at distance position.
      • Its straight edge is parallel to the line perpendicular to the subpath at distance position along it.
      • The midpoint of its straight edge is at the point that is along the subpath at distance position.
      • The direction from the midpoint of its arc to the midpoint of its straight edge is the same as the direction of the subpath at distance position.
   2. Otherwise, this is an ending cap. Return a semicircle of diameter stroke-width positioned such that:
      • The subpath that the semicircle is relative to is the subpath ending at distance position.
      • Its straight edge is parallel to the line perpendicular to the subpath at distance position along it.
      • The midpoint of its straight edge is at the point that is along the subpath at distance position.
      • The direction from the midpoint of its straight edge to the midpoint of its arc is the same as the direction of the subpath.
3. Otherwise, stroke-linecap is square:
   1. If this is a starting cap, then return a rectangle with side lengths stroke-width and stroke-width / 2 positioned such that:
      • Its longer edges, A and B, are parallel to the line perpendicular to the subpath at distance position along it.
      • The midpoint of A is at start.
      • The direction from the midpoint of B to the midpoint of A is the same as the direction of the subpath at distance position along it.
   2. Otherwise, this is an ending cap. Return a rectangle with side lengths stroke-width and stroke-width / 2 positioned such that:
      • Its longer edges, A and B, are parallel to the line perpendicular to the subpath at distance position along it.
      • The midpoint of A is at end.
      • The direction from the midpoint of A to the midpoint of B is the same as the direction of the subpath at distance position along it.

The three different stroke-linecap values used on paths with a single, non-zero length subpath. The white line is the path itself and the thick gray area is the stroke. On the top row, the green lines indicate the perpendicular to the tangent at the path endpoints and the pink areas are the caps. The bottom row shows the stroke without the perpendicular and cap highlighting.

The line join shape for a given segment of a subpath is determined as follows:

1. Let P be the point at the end of the segment.
2. If the unit tangent vector at the end of the segment and the unit tangent vector at the start of the following segment are equal, then return an empty shape.

   This means for example that 'M 100,100 h 100 h 100' would not produce a line join shape between the two straight line segment, but 'M 100,100 h 100 h -100' would.

3. Let A be the line parallel to the tangent at the end of the segment.
4. Let B be the line parallel to the tangent at the start of the following segment.
5. Let A_left and A_right be lines parallel to A at a distance of stroke-width / 2 to the left and to the right of A relative to the subpath direction, respectively.
6. Let B_left and B_right be lines parallel to B at a distance of stroke-width / 2 to the left and to the right of B, relative to the subpath direction, respectively.
7. Let P₁, P₂ and P₃ be points determined as follows:
   1. If the smaller angle between A and B is on the right of these lines, considering the direction of the subpath, then P₁ and P₂ are the points on A_left and B_left closest to P, and P₃ is the intersection of A_left and B_left.
   2. Otherwise, P₁ and P₂ are the points on A_right and B_right closest to P, and P₃ is the intersection of A_right and B_right.
8. Let bevel be the triangle formed from the three points P, P₁ and P₂.
9. If stroke-linejoin is round, then return the union of bevel and a circular sector of diameter stroke-width, centered on P, and which has P₁ and P₂ as the two endpoints of the arc.
10. If stroke-linejoin is arcs, then find the circles that are tangent to the stroke edges at P₁ and P₂ with the same curvature as the edges at those points (see below). If both curvatures are zero fall through to miter-clip. If either curvature is greater than 2/(stroke width), fallback to round. Extend the stroke edges using these circles (or a line, in the case of zero curvature). If the two circles (or circle and line) do not intersect, adjust the radii of the two circles by an equal amount (or just the circle in case of a circle and line) until they do intersect (see below). The line join region is defined by the lines that connect P with P₁ and P₂ and the arcs defined by the circles (or arc and line) between the closest intersection point to P, and P₁ and P₂. Next calculate the miter limit as defined in the stroke-miterlimit section. Clip any part of the line join region that extends past the miter limit. Return the resulting region. Note that the curvatures are calculated in user-space before any transforms are applied.
11. If stroke-linejoin is miter or miter-clip then the line join region is the union of bevel and the triangle formed from the three points P₁, P₂ and P₃.
12. Let θ be the angle between A and B. If 1 / sin(θ / 2) ≤ stroke-miterlimit, then return the line join region.
13. If stroke-linejoin is miter-clip, then clip any part of the line join region that extends past the miter limit and return this region.
14. Return bevel.

Construction of a round line join shape, shown in pink. The white line is the original path, which has two segments that come to a point, and the gray region is the stroke.

Construction of an arcs line join shape, shown in pink. The white line is the original path, which has two segments that come to a point, and the dark gray region is the stroke. The dashed lines show circles that are tangent to and have the curvature of the segments at the join. The olive-green circles (concentric with the dashed circles) define the join shape.

12.5.8. Computing the circles for the arcs 'stroke-linejoin'

The arcs stroke-linejoin requires finding circles that are both tangent to and have the same curvatures as the outer stroke edges at the ends of path segments. To find one of these circles, first calculate the curvature κ of the path segment at its end (see below). Next, find the radius of a circle corresponding to this curvature: r = 1/κ. Increase or decrease the radius by one half of the stroke width to account for the stroke: r_c = r ± ½ stroke-width. The center of the circle will be on a line normal to the path end a distance of r_c away from the outer stroke edge at the end.

For a line: the curvature is zero. Extend the outer stroke edge by a line.

For an elliptical arc:

$$\kappa(t) = {{r_x r_y}\over{(r_x^2 \sin^2 t + r_y^2 \cos^2 t)^{3/2}}}$$

where:

$$t = \arctan ( {r_y \over r_x} \tan \theta )$$

The parameter θ at the beginning or end of an arc segment can be found by using the formulas in the Elliptical arc implementation notes. (Note, some renderers convert elliptical arcs to cubic Béziers prior to rendering so the equations here may not be needed.)

For a quadratic Bézier:

$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$

$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$

Where κ(0) and κ(1) are the signed curvatures at the start and end of the path segment respectively, and the P's are the three points that define the quadratic Bézier.

For a cubic Bézier:

$$\kappa(0) = {2\over3}{(P_1-P_0)\times((P_0-P_1)+(P_2-P_1))\over|P_1-P_0|^3}$$

$$\kappa(1) = {2\over3}{(P_3-P_2)\times((P_1-P_2)+(P_3-P_2))\over|P_3-P_2|^3}$$

Where κ(0) and κ(1) are the signed curvatures at the start and end of the path segment respectively, and the P's are the four points that define the cubic Bézier. Note, if P₀ and P₁, or P₂ and P₃ are degenerate, the curvature will be infinite and a line should be used in constructing the join.

12.5.9. Adjusting the circles for the arcs 'stroke-linejoin' when the initial circles do not intersect

The fallback behavior was resolved at the Sydney 2016 F2F. It gives a smooth transition between the fallback and non-fallback states.

When the initial circles calculated for the arcs stroke-linejoin do not intersect, they need to be adjusted by changing both radii by the same magnitude (moving the circle centers to keep the circles tangent to the offset paths) until the circles just touch. There are two cases to consider. The first is when one circle encloses the other circle. In this case the larger circle is reduced in size while the smaller circle is increased in size:

Construction of an arcs line join shape, shown in pink. The white line is the original path and the dark gray region is the stroke. The dashed lines show circles that are tangent to and have the curvature of the segments at the join. Note the circles do not intersect. Two new circles are constructed by adjusting the radii of the original circles by the same magnitude with the larger circle being made smaller and the smaller circle being made larger until the new circles just touch as shown by the olive-green circles. These new circles then define the join shape.

The second case is when there is no overlap between the circles. In this case the radii of both circles are increased by the same amount:

Construction of an arcs line join shape, shown in pink. The white line is the original path and the dark gray region is the stroke. The dashed lines show circles that are tangent to and have the curvature of the segments at the join. Note they do not intersect. Two new circles are constructed by increasing the radii of the original circles by the same amount until the new circles just touch as shown by the olive-green circles. These new circles then define the join shape.

If in this latter case, the tangents of the offset paths at the line join are parallel, the circles cannot be adjusted so that they touch. The line join should then be constructed as a rectangle whose width is the stroke width and whose length is the stroke width times one half of the value of the stroke-miterlimit:

Construction of an arcs line join shape, shown in pink. The white line is the original path, which has two segments that come to a point, and the dark gray region is the stroke. The dashed lines show circles that are tangent to and have the curvature of the segments at the join. Note they do not intersect. Even if the radii of the circles is increased to infinity, the circles will not intersect. The line join is then a rectangle with the length determined by the miter limit (shown as a vertical dashed line).

There are a couple of ways to implement the fallback algorithm. The first way is by recursive trial and error on the magnitude of the radius change. The second is by an exact calculation utilizing the touching circle condition and the constraints that the centers of the circles must remain on lines normal to the path segments at the join. This leads to a quadratic equation where one solution is the required radius change.

12.8. Controlling paint operation order: the ‘paint-order’ property

New in SVG 2. Added primarily to allow painting the stroke of text below its fill without needing to duplicate the ‘text’ element.

The paint-order property controls the order that the three paint operations that shapes and text are rendered with: their fill, their stroke and any markers they might have.

When the value of this property is normal, the element is painted with the standard order of painting operations: the fill is painted first, then its stroke and finally its markers.

When any of the other keywords are used, the order of the paint operations for painting the element is as given, from left to right. If any of the three keywords are omitted, they are painted last, in the order they would be painted with paint-order: normal.

This mean that, for example, paint-order: stroke has the same rendering behavior as paint-order: stroke fill markers.

The following example shows how the paint-order property can be used to render stroked text in a more aesthetically pleasing manner.

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="150" viewBox="0 0 600 150">

  <style>
    text {
      font: 80px bold sans-serif; stroke-linejoin: round;
      text-anchor: middle; fill: peachpuff; stroke: crimson;
    }
  </style>

  <text x="150" y="100" style="stroke-width: 6px;">pizazz</text>
  <text x="450" y="100" style="stroke-width: 12px; paint-order: stroke;">pizazz</text>
</svg>

Text painted with its stroke below the fill.

12.9. Color space for interpolation: the ‘color-interpolation’ property

The SVG user agent performs color interpolations and compositing at various points as it processes SVG content. The color-interpolation property controls which color space is used for the following graphics operations:

• interpolating between gradient stops,
• interpolating color when performing color animations with ‘animate’,
• and compositing and blending of graphics elements into the current background.

For filter effects, the color-interpolation-filters property controls which color space is used. [FILTERS]

12.12. DOM interfaces

12.12.1. Interface SVGMarkerElement

An SVGMarkerElement object represents a ‘marker’ element in the DOM.

interface SVGMarkerElement : SVGElement {

  // 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;

  [SameObject] readonly attribute SVGAnimatedLength refX;
  [SameObject] readonly attribute SVGAnimatedLength refY;
  [SameObject] readonly attribute SVGAnimatedEnumeration markerUnits;
  [SameObject] readonly attribute SVGAnimatedLength markerWidth;
  [SameObject] readonly attribute SVGAnimatedLength markerHeight;
  [SameObject] readonly attribute SVGAnimatedEnumeration orientType;
  [SameObject] readonly attribute SVGAnimatedAngle orientAngle;
  attribute DOMString orient;

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

SVGMarkerElement implements SVGFitToViewBox;

The numeric marker unit type constants defined on SVGMarkerElement are used to represent the keyword values that the ‘markerUnits’ attribute can take. Their meanings are as follows:

The numeric marker orientation type constants defined on SVGMarkerElement are used to represent the types of values that the ‘orient’ attribute can take. Their meanings are as follows:

The markerUnits IDL attribute reflects the ‘markerUnits’ content attribute. The numeric type values for ‘markerUnits’ are as described above in the numeric marker unit type constant table.

The orientType, orientAngle and orient IDL attributes all reflect the ‘orient’ content attribute. The numeric type values for ‘orient’ are as follows:

The refX, refY, markerWidth and markerHeight IDL attributes reflect the ‘refX’, ‘refY’, ‘markerWidth’ and ‘markerHeight’ content attributes, respectively.

The setOrientToAuto method is used to set the value of the ‘orient’ attribute to 'auto'. When setOrientToAuto() is called, the ‘orient’ attribute is simply set to 'auto'.

The setOrientToAngle method is used to set the value of the ‘orient’ attribute to a specific angle value. When setOrientToAngle(angle) is called, the ‘orient’ attribute is reserialized using angle as the value.