13.1. Introduction

13.1.1. Definitions

fill

The operation ofpainting the interior of ashape or the interior of the character glyphs in a text string.

stroke

The operation ofpainting the outline of ashape or the outline of character glyphs in a text string.

Graphical elements that define a shape – ‘path’ elements,basic shapes,andtext content elements – are rendered by beingfilled,which is painting the interior of the object, andstroked, which ispainting along the outline of the object. Filling and stroking are bothpainting operations. SVG 2 supports a number ofdifferent paints that the fill and stroke of a graphical element can be painted with:

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

The paint to use for filling and stroking an element is specified using thefill andstroke properties. The following section describesthe different values that can be used for these properties.

Other properties, such asfill-opacity andstroke-width,also have an effect on the way fill and stroke paint is applied to thecanvas. TheFill properties andStroke propertiessections below describe these properties.

Some graphics elements – ‘path’ elements andbasic shapes – can also havemarker symbolsdrawn at their vertices or at other positions along the path thatthey describe. TheMarkers section below describeshow markers can be defined and used.

SVG 2 adds markers on shapes. Resolved atTokyo F2F.

13.2. Specifying paint

Thefill andstroke properties, defined below, are used tospecify thepaint used to render the interior of and thestroke around shapes and text. A paint specification describes a way of puttingcolor 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, andpatterns.

A<paint> value is defined as follows:

<paint>= none|<color>|<url> [none |<color>]?| context-fill | context-stroke

With the possible values:

none

No paint is applied in this layer.

<url> [none |<color>]?

A URL reference to apaint server element, which is an element that defines apaint server:‘linearGradient’,‘pattern’ and‘radialGradient’, optionally followed by a fall-back value that is used if the paint server reference cannot be resolved.

<color>

A solid color paint.

context-fill

Use the paint value offill from acontext element.

context-stroke

Use the paint value ofstroke from acontext element.

A<paint> allows a paint server reference, to be optionally followedby a<color> or the keywordnone.When this optional value is given, the<color> value or the valuenone is a fallback value to use if the paintserver reference in the layer is invalid (due to pointing to an element thatdoes not exist or which is not a valid paint server).

Note that this is slightly different from CSS background syntax, wherea background image and color specified in the final layer of abackgroundvalue will result in both the image and color being rendered.

If a paint server reference in a<paint> is invalid, and nofall-back value is given, no paint is rendered for that layer.

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

<rect width="100" height="100" fill="url(#MyHatch) powderblue">

The left rectangle shows the expected fill if MyHatch is defined. The right rectangle shows the expected fill if MyHatch is missing.

For any<color> value, all color syntaxesdefined inCSS Color Module Level 3must be supported, includingrgb(),rgba(),hsl(),hsla(),theextended color keywords andthecurrentColor value.

Thecontext-fill andcontext-strokevalues are a reference to the paint layers generated for thefill orstrokeproperty, respectively, of thecontext elementof 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 amarker 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 isapplied.

When the context paint layers include paint server references, then thecoordinate space and the bounding box usedto scale the paint server elements and content arethose of thecontext element.In other words, any gradients and patterns referenced with these keywordsshould be continuous from the main shape to the markers,or from one element within ause-element shadow tree to another.

If the referenced value offill orstroke is acontext-fill andcontext-strokevalue, 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 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 whosestroke is set tocontext-stroke. This causes the marker to take on the color of each‘path’ element that uses the marker.

13.3. The effect of the ‘color’ property

See the CSS Color Module Level 3 specification for thedefinition ofcolor.[css-color-3]

Thecolor property is used to provide a potential indirect value,currentColor, for thefill,stroke,stop-color,flood-color andlighting-color properties. The property has no other effecton 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>

13.4. Fill properties

13.4.1. Specifying fill paint: the ‘fill’ property

Thefill property paints the interior of the given graphicalelement. The area to be painted consists of any areas inside the outlineof the shape. To determine the inside of the shape, all subpaths areconsidered, and the interior is determined according to the rulesassociated with the current value of thefill-rule property.The zero-width geometric outline of a shape is included in the area tobe painted.

The fill operation fillsopen subpaths by performing the filloperation as if an additional "closepath" command were added to thepath to connect the last point of the subpath with the first point ofthe subpath. Thus, fill operations apply to bothopen subpaths within‘path’ elements (i.e., subpaths without a closepath command) and‘polyline’ elements.

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

Thefill-rule property indicates the algorithm (orwinding rule) which is tobe used to determine what parts of the canvas are included inside theshape. For a simple, non-intersecting path, it is intuitively clearwhat region lies "inside"; however, for a more complex path, such as apath that intersects itself or where one subpath encloses another, theinterpretation of "inside" is not so obvious.

Thefill-rule property provides two options for how theinside 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 isoutside the path. Otherwise, it isinside. The following drawing illustrates thenonzero 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 theevenodd 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 pathsegment 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 problemintersections.

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

fill-opacity specifies the opacity of the painting operation usedto paint the fill the current object. (SeePainting shapes and text).

<number>

The opacity of the fill. Any values outside the range 0 (fully transparent) to 1 (fully opaque) must be clamped to this range.

<percentage>

The opacity of the fill expressed as a percentage of the range 0 to 1.

See also theopacity property, whichspecifies group opacity.

13.5. Stroke properties

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

In all cases, all stroking properties which are affected bydirectionality, such as those having to do with dash patterns, must berendered such that the stroke operation starts at the same point atwhich 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 computationsare dependent on progress along the outline of the graphics element,distance calculations are required to utilize the SVG user agent'sstandardDistance along a pathalgorithms.

When stroking is performed using a complex paint server, such as agradient or a pattern, the stroke operation must be identical to theresult that would have occurred if the geometric shape defined by thegeometry of the current graphics element and its associated strokingproperties were converted to an equivalent‘path’ element andthen filled using the given paint server.

13.5.1. Specifying stroke paint: the ‘stroke’property

Thestroke property paints along the outline of the givengraphical element.

Note that when stroking a‘path’ element,any subpath consisting of amovetobut 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 thestroke-linecap property has a value ofbutt. See the definition ofthestroke shape below for the details of computingthe stroke of a path.

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

Thestroke-opacity property specifies the opacity of thepainting operation used to stroke the current object. (SeePainting shapes and text.)As withfill-opacity.

<number>

The opacity of the stroke. Any values outside the range 0 (fully transparent) to 1 (fully opaque) must be clamped to this range.

<percentage>

The opacity of the stroke expressed as a percentage of the range 0 to 1.

See also theopacity property, which specifiesgroup opacity.

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

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

stroke-linecap specifies the shape to be used at the end ofopen subpaths when they are stroked,and the shape to be drawn for zero lengthsubpaths 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 thecap shape below for a more precisedescription of the shape a line cap will have.

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

stroke-linejoin specifies the shape to be used at thecorners of paths or basic shapes when they are stroked. For further details seethepath 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 thestroke-miterlimit is exceeded, the line join falls back tobevel (see below).

miter-clip

This value is the same asmiter but if thestroke-miterlimit is exceeded, the miter is clipped at a distance equal to half thestroke-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.

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

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

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

Four types of line joins.

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

<number>

The limit on the extent of amiter,miter-clip, orarcs line join as a multiple of thestroke-width value. A negative value forstroke-miterlimit must be treated as anillegal value.

Previous versions of the SVG specification also stated that values between 0 and 1 were in error, but this was not well implemented by user agent's CSS parsers. In practice, any miter join will exceed a miter limit between 0 and 1.

For themiter or themiter-clip values, given the angleθ between the segments in user 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 themiter-clip andarcs line joins is at a distance or arc length equal to half thestroke-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 thestroke-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 whenstroke-miterlimit is exceeded. The olive-green dashed lines shows the position of the miter limit when thestroke-miterlimit value is 3. The gray regions shows what the joins would look like without a miter limit.

For thearcs value, themiter 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 thestroke-miterlimit value multiplied by the stroke width.

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

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

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

where:

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

Thestroke-dasharray property controlsthe pattern of dashes and gaps used to form the shape ofa 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 (adash) and not painted (agap). 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 ofstroke-dasharray: 5,3,2 is equivalent tostroke-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 isinvalid. 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 is20,10. The red line shows the actual path that is stroked.

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

Thestroke-dashoffset property specifies the distance into the repeateddash pattern to start the stroke dashing at the beginning of the path. If thevalue is negative, then the effect is the same as dash offsetd:

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

wheres is the sum of the dash array values.

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

Likestroke-dasharray,stroke-dashoffset is interpretedrelative 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 d="M -50,0 A 50,50 0 0 0 50,0 A 50,50 0 0 0 -50,0 z"          pathLength="80"/>    <g 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 desiredstroke-dasharray andstroke-dashoffset values easy to compute.

See the definition ofdash positions below for a more precisedescription of positions along a path that dashes will be placed.

13.5.7. Computing the shape of the stroke

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

Authors should be aware that the shape of a stroke may in some cases, such asat 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 followingtwo 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. Letshape be an empty shape.
2. Ifstroke-width > 0, then:
   1. Letscale be a scale factor for the dash pattern. If we are computing the stroke shape of a‘text’ chunk, or if the‘pathLength’ attribute is not present on the element, thenscale is 1. Otherwise, it is determined as follows:
      1. Letlength be the user agent's computed length of the‘path’ orequivalent path for abasic shape.
      2. Letauthorlength be the value of the‘pathLength’ attribute on theshape.
      3. scale isauthorlength /length.
   2. Letpath be theequivalent path of the element (or the individual chunk of a‘text’ element).
   3. For each subpath ofpath:
      1. Letpositions be thedash positions for the subpath.
      2. For each pair <start,end> inpositions:
         1. Scalestart andend byscale.
         2. Letdash be the shape that includes, for all distances betweenstart andend along the subpath, all points that lie on the line perpendicular to the subpath at that distance and which are within distancestroke-width of the point on the subpath at that position.
         3. Setdash to be the union ofdash and the startingcap shape for the subpath at positionstart.
         4. Setdash to be the union ofdash and the endingcap shape for the subpath at positionend.
         5. Letindex andlast be the indexes of the path segments in the subpath at distancestart andend along the subpath.

            It does not matter whether any zero length segments are included when choosingindex andlast.

         6. Whileindex <last:
            1. Setdash to be the union ofdash and theline join shape for the subpath at segment indexindex.
            2. Setindex toindex + 1.
         7. Setshape to be the union ofshape andstroke.
3. Returnshape.

Thedash positions for a given subpath oftheequivalent path of a‘path’ orbasic shape is asequence of pairs of values, which represent the starting and ending distancealong the subpath for each of the dashes that form the subpath's stroke. It isdetermined as follows:

1. Letpathlength be the length of the subpath.
2. Letdashes be the list of values ofstroke-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 valuenone, then the list has a single value 0.
3. Letcount be the number of values indashes.
4. Letsum be the sum of the values indashes.
5. Ifsum = 0, then return a sequence with the single pair <0,pathlength>.
6. Letpositions be an empty sequence.
7. Letoffset be the value of thestroke-dashoffset property on the element.
8. Ifoffset is negative, then setoffset tosum − abs(offset).
9. Setoffset tooffset modsum.
10. Letindex be the smallest integer such that sum(dashes_i, 0 ≤i ≤index) ≥offset.
11. Letdashlength be min(sum(dashes_i, 0 ≤i ≤index) −offset,pathlength).
12. Ifindex mod 2 = 0, then append topositions the pair <0,dashlength>.
13. Letposition bedashlength.
14. Whileposition <pathlength:
    1. Setindex to (index + 1) modcount.
    2. Letdashlength be min(dashes_index,pathlength −position).
    3. Ifindex mod 2 = 0, then append topositions the pair <position,position +dashlength>.
    4. Setposition toposition +dashlength.
15. Returnpositions.

The starting and endingcap shapes at a givenposition along a subpath are determined as follows:

1. Ifstroke-linecap isbutt, then return an empty shape.
2. Otherwise, ifstroke-linecap isround, then:
   1. If this is a starting cap, then return a semicircle of diameterstroke-width positioned such that:
      • The subpath that the semicircle is relative to is the subpath starting at distanceposition.
      • Its straight edge is parallel to the line perpendicular to the subpath at distanceposition along it.
      • The midpoint of its straight edge is at the point that is along the subpath at distanceposition.
      • 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 distanceposition.
   2. Otherwise, this is an ending cap. Return a semicircle of diameterstroke-width positioned such that:
      • The subpath that the semicircle is relative to is the subpath ending at distanceposition.
      • Its straight edge is parallel to the line perpendicular to the subpath at distanceposition along it.
      • The midpoint of its straight edge is at the point that is along the subpath at distanceposition.
      • 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 issquare:
   1. If this is a starting cap, then return a rectangle with side lengthsstroke-width andstroke-width / 2 positioned such that:
      • Its longer edges,A andB, are parallel to the line perpendicular to the subpath at distanceposition along it.
      • The midpoint ofA is atstart.
      • The direction from the midpoint ofB to the midpoint ofA is the same as the direction of the subpath at distanceposition along it.
   2. Otherwise, this is an ending cap. Return a rectangle with side lengthsstroke-width andstroke-width / 2 positioned such that:
      • Its longer edges,A andB, are parallel to the line perpendicular to the subpath at distanceposition along it.
      • The midpoint ofA is atend.
      • The direction from the midpoint ofA to the midpoint ofB is the same as the direction of the subpath at distanceposition along it.

The three differentstroke-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.

Theline join shape for a given segment ofa subpath is determined as follows:

1. LetP 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. LetA be the line parallel to the tangent at the end of the segment.
4. LetB be the line parallel to the tangent at the start of the following segment.
5. LetA_left andA_right be lines parallel toA at a distance ofstroke-width / 2 to the left and to the right ofA relative to the subpath direction, respectively.
6. LetB_left andB_right be lines parallel toB at a distance ofstroke-width / 2 to the left and to the right ofB, relative to the subpath direction, respectively.
7. LetP₁,P₂ andP₃ be points determined as follows:
   1. If the smaller angle betweenA andB is on the right of these lines, considering the direction of the subpath, thenP₁ andP₂ are the points onA_left andB_left closest toP, andP₃ is the intersection ofA_left andB_left.
   2. Otherwise,P₁ andP₂ are the points onA_right andB_right closest toP, andP₃ is the intersection ofA_right andB_right.
8. Letbevel be the triangle formed from the three pointsP,P₁ andP₂.
9. Ifstroke-linejoin isround, then return the union ofbevel and a circular sector of diameterstroke-width, centered onP, and which hasP₁ andP₂ as the two endpoints of the arc.
10. Ifstroke-linejoin isarcs, then find the circles that are tangent to the stroke edges atP₁ andP₂ with the same curvature as the edges at those points (see below). If both curvatures are zero fall through tomiter-clip. If either curvature is greater than 2/(stroke width), fallback toround. 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 connectP withP₁ andP₂ and the arcs defined by the circles (or arc and line) between the closest intersection point toP, andP₁ andP₂. Next calculate themiter limit as defined in thestroke-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. Ifstroke-linejoin ismiter ormiter-clip then the line join region is the union ofbevel and the triangle formed from the three pointsP₁,P₂ andP₃.
12. Letθ be the angle betweenA andB. If 1 / sin(θ / 2) ≤stroke-miterlimit, then return the line join region.
13. Ifstroke-linejoin ismiter-clip, then clip any part of the line join region that extends past the miter limit and return this region.
14. Returnbevel.

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.

13.5.8. Computing the circles for thearcs'stroke-linejoin'

Thearcsstroke-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 ofr_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 \left( {r_y \over r_x} \tan \theta \right)$$

The parameterθ at the beginning or end of an arc segment can be found by using the formulas in theElliptical 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 theP'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 theP's are the four points that define the cubic Bézier. Note, ifP₀ andP₁, orP₂ andP₃ are degenerate, the curvature will be infinite and a line should be used in constructing the join.

13.5.9. Adjusting the circles for thearcs'stroke-linejoin' when the initial circles do not intersect

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

When the initial circles calculated for thearcsstroke-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 thestroke-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 thetouching 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.

13.7. Markers

A marker is a graphical object that is painted at particular positions alonganyshape element.

Themarker-start andmarker-end propertiescan be used to place markers at the first and last vertex of ashape, and themarker-mid property can be usedto place markers at all other vertices (aside from the first and last).Themarker-start andmarker-end can be used for example toadd arrowheads to paths. Markers placed using these properties are known asvertex markers.

In SVG 2, vertex markers are the only kind of markersavailable. Other specifications will add new types of markers.

The graphics for a marker are defined by a‘marker’ element.Themarker-start,marker-end andmarker-mid properties,together known as themarker properties, reference‘marker’ elements.

Markers can be animated, and as with‘use’ elements, the animatedeffects will show on all current uses of the markers within the document.

Markers on a given element are painted in the following order, frombottom to top:

• any marker specified bymarker-start
• themarker-mid markers, in order of their position along the path
• any marker specified bymarker-end

13.7.1. The‘marker’ element

The‘marker’ element defines the graphics that are tobe used for drawing markers on ashape.

Attribute definitions:

Name	Value	Initial value	Animatable
markerUnits	strokeWidth | userSpaceOnUse	strokeWidth	yes

The‘markerUnits’ attribute defines the coordinate system forattributes‘markerWidth’,‘markerHeight’ and thecontents of the‘marker’. Values have thefollowing meanings:

strokeWidth

‘markerWidth’,‘markerHeight’ and the contents of the‘marker’ have values in a coordinate system which has a single unit equal to the size in user units of the painted stroke width of the element referencing the marker.

userSpaceOnUse

‘markerWidth’,‘markerHeight’ and the contents of the‘marker’ have values in the current user coordinate system in place for the element referencing the marker.

When‘markerUnits’ has the valuestrokeWidth,the size of the marker is relative to thestroke-width after it hashad any transforms applied that affect the width of the stroke in theuser coordinate system for the stroke. This means that, for example,thevector-effect attribute with a value ofnon-scaling-stroke will result in the markersalso being non scaling.

Name	Value	Initial value	Animatable
markerWidth,markerHeight	<length-percentage> |<number>	3	yes

The‘markerWidth’ and‘markerHeight’ attributesrepresent the size of the SVG viewport into which the marker is tobe fitted according to the‘viewBox’ and‘preserveAspectRatio’attributes. A value of zero for eitherattribute results in nothing being rendered for the marker. A negative valuefor either attribute is an error (seeError processing).

Name	Value	Initial value	Animatable
refX	<length-percentage> |<number> | left | center | right	0	yes
refY	<length-percentage> |<number> | top | center | bottom	0	yes

New in SVG 2: geometric keywords (matches use in‘symbol’).

We will add top/center/bottom, left/center/right keywords to refX/refY on marker/symbol. Resolved atLondon F2F. Values inspired by'background-position'.

The‘refX’ and‘refY’ attributes define the referencepoint of the marker, which is to be placed exactly at the marker'sposition on theshape. Lengths and numbers must be interpretedas being in the coordinate system of the marker contents, after application of the‘viewBox’ and‘preserveAspectRatio’ attributes. Percentagevalues must be interpreted as being a percentage of the‘viewBox’width for‘refX’ or a percentage of the‘viewBox’ height for‘refY’.

The keyword values must evaluate to the following percentages:

Mapping of refX and refY keywords to percentages.

keyword	percentage equivalent
left	0%
center	50%
right	100%
top	0%
bottom	100%

Name	Value	Initial value	Animatable
orient	auto | auto-start-reverse |<angle> |<number>	0	yes (non-additive)

The‘orient’ attribute indicates how the markeris rotated when it is placed at its position on theshape.Values have the following meanings:

'auto'

The marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed (SeeRendering Markers).

'auto-start-reverse'

If placed bymarker-start, the marker is oriented 180° different from the orientation that would be used if'auto' where specified. For all other markers,'auto-start-reverse' means the same as'auto'.

This allows a single arrowhead marker to be defined that can be used for both the start and end of a path, i.e. which points outwards from both ends.

<angle>

<number>

The marker is oriented such that the specified angle is that measured between theshape's positive x-axis and the marker's positive x-axis. A<number> value specifies an angle in degrees.

For example, if a value of'45' is given, then the marker's positive x-axis would be pointing down and right in theshape's coordinate system.

13.7.2. Vertex markers: the ‘marker-start’,‘marker-mid’ and ‘marker-end’properties

where:

<marker-ref> =<url>

Themarker-start andmarker-end properties are usedto specify the marker that will be drawn at the first and last verticesof the givenshape, respectively.marker-midis used to specify the marker that will be drawn at all other vertices(i.e., every vertex except the first and last).Possible values formarker-start,marker-mid andmarker-end are:

none

Indicates that no marker symbol will be drawn at the given vertex or vertices.

<marker-ref>

Indicates that the‘marker’ element referenced by the<marker-ref> value will be drawn at the given vertex or vertices. If the reference is not valid, then no marker will be drawn at the given vertex or vertices.

For allshapes, the path that must be used when calculatingmarker positions is theequivalent path.

For allshape elements, except‘polyline’ and‘path’,the last vertex is the same as the firstvertex. In this case, if the value ofmarker-start andmarker-endare both notnone, then two markerswill be rendered on that final vertex.For‘path’ elements, for eachclosed subpath, the last vertex isthe same as the first vertex.marker-start must only be rendered onthe first vertex of thepath data.marker-end must only berendered on the final vertex of thepath data.marker-mid must be rendered on every vertex other than the firstvertex of thepath data and the last vertex of thepath data.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">  <defs>    <marker viewBox="0 0 10 10" refX="5" refY="5"     markerWidth="8" markerHeight="8">      <circle cx="5" cy="5" r="5" fill="green"/>    </marker>    <marker viewBox="0 0 10 10" refX="5" refY="5"     markerWidth="6.5" markerHeight="6.5">      <circle cx="5" cy="5" r="5" fill="skyblue" opacity="0.9"/>    </marker>    <marker viewBox="0 0 10 10" refX="5" refY="5"     markerWidth="5" markerHeight="5">      <circle cx="5" cy="5" r="5" fill="maroon" opacity="0.85"/>    </marker>      </defs>    <path d="M10,10 h10 v10 z m20,0 h10 v10 z m20,0 h10 v10 z"  fill="none" stroke="black"  marker-start="url(#m1)"    marker-mid="url(#m2)"  marker-end="url(#m3)"    /></svg>

Forpath data containingclosed subpaths, two markers are drawn at the first/last vertex of eachclosed subpath. For the leftmostclosed subpath, amarker-mid is drawn over themarker-start. For the middleclosed subpath, twomarker-mid are drawn on top of one another. For the rightmostclosed subpath,marker-end is drawn overmarker-mid.

Note thatmarker-start andmarker-endrefer to the first and last vertex of the entire path, not each subpath.

The following example shows a triangular marker symbol used as avertex marker to form an arrowhead at the end of two paths.

<svg xmlns="http://www.w3.org/2000/svg"     width="275" height="200" viewBox="0 0 275 200">  <defs>    <marker viewBox="0 0 10 10" refX="1" refY="5"             markerUnits="strokeWidth" markerWidth="4" markerHeight="3"            orient="auto">      <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>    </marker>  </defs>  <g fill="none" stroke-width="10" marker-end="url(#Triangle)">    <path stroke="crimson" d="M 100,75 C 125,50 150,50 175,75"/>    <path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125"/>  </g></svg>

The triangle is placed at the end of the path and oriented automatically so that it points in the right direction. The use ofcontext-stroke ensures the fill of the triangle matches the stroke of each‘path’.

13.7.3. Marker shorthand: the ‘marker’property

Themarker property sets values for themarker-start,marker-mid andmarker-endproperties. The value of themarker is useddirectly for all three of the corresponding longhand properties.

13.7.4. Rendering markers

When orienting a marker automatically, due to specifying‘orient’as'auto', the following rules are used:

• If the vertex is the start or end of anopen subpath, then the marker is oriented in thepath direction.
• Otherwise, the marker is oriented in a direction half way between thedirection at the end of the preceding segment and thedirection at the start of the following segment.

For each marker that is drawn, a temporary new user coordinatesystem is established so that the marker will be positioned and sizedcorrectly, as follows:

• The axes of the temporary new user coordinate system are aligned according to the‘orient’ attribute on the‘marker’ element.
• A temporary new coordinate system is established by attribute‘markerUnits’. If‘markerUnits’ equals'strokeWidth', then the temporary new user coordinate system is the result of scaling the current user coordinate system by the current value of propertystroke-width. If‘markerUnits’ equals'userSpaceOnUse', then no extra scale transformation is applied.
• An additional set of transformations might occur if the‘marker’ element includes a‘viewBox’ attribute, in which case additional transformations are set up to produce the necessary result due to attributes‘viewBox’ and‘preserveAspectRatio’.
• If theoverflow property on the‘marker’ element indicates that the marker needs to be clipped to its SVG viewport, then an implicit clipping path is established at the bounds of the SVG viewport.

Note that theuser agent style sheet setstheoverflow property for‘marker’ elements tohidden, which causes a rectangular clippingpath to be created at the bounds of marker's SVG viewport by default.

Properties do not inherit from the element referencing the‘marker’into the contents of the marker. However, by using thecontext-stroke value for thefill orstroke on elements in its definition, a single marker can be designedto match the style of the element referencing the marker.

Markers cannot be interacted with. Events such as click or mouseover,for example, are not dispatched to a‘marker’ or its children whenthe mouse is clicked or moved over a rendered marker.

Markers are not rendered directlyand must be referenced by one of themarker propertiesto be rendered.Thedisplay value for the‘marker’ elementmust always be set tononeby theuser agent style sheet,and this declaration must have importance over any other CSS rule or presentation attribute.‘marker’ elements are available for referencing even when thedisplay property on the‘marker’ element or any of itsancestors is set tonone.

The rendering effect of a marker is as if the contents of thereferenced‘marker’ element were deeply clonedinto a separate non-exposed DOM tree for each instance of themarker. Because the cloned DOM tree is non-exposed, the SVG DOMdoes not show the cloned instance of the marker.

The conceptual deep cloning of the referenced‘marker’ element into a non-exposed DOM tree alsocopies any property values resulting fromthe CSS cascade([CSS2], chapter 6) andproperty inheritance on the referenced element and its contents. CSSselectors can be applied to the original (i.e., referenced) elementsbecause they are part of the formal document structure. CSS selectorscannot be applied to the (conceptually) cloned DOM tree because itscontents are not part of the formal document structure.

<?xml version="1.0" standalone="no"?><svg width="4in" height="2in"     viewBox="0 0 4000 2000"     xmlns="http://www.w3.org/2000/svg">  <defs>    <marker      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"       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"        fill="none" stroke="black" stroke-width="100"        marker-end="url(#Triangle)"  /></svg>

<?xml version="1.0" standalone="no"?><svg width="4in" height="2in"     viewBox="0 0 4000 2000"     xmlns="http://www.w3.org/2000/svg">  <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"       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"        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 to match the coordinate system           indicated by the 'markerUnits' attributes, which in this case has           a value of 'strokeWidth'. Therefore, scale the coordinate system           by the current value of the 'stroke-width' property, which is 100. --><g transform="scale(100)" >        <!-- Translate the coordinate system by             (-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)             in order that (refX,refY) within the marker will align with the vertex.             In this case, we use the default value for preserveAspectRatio             ('xMidYMid meet'), which means find a uniform scale factor             (i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY)             such that the viewBox fits entirely within the SVG viewport ('meet') and             is center-aligned ('xMidYMid'). In this case, the uniform scale factor             is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by             (-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). --><g transform="translate(0,-1.5)" >          <!-- There is an implicit clipping path because the user agent style               sheet says that the 'overflow' property for markers has the value               'hidden'. To achieve this, create a clipping path at the bounds               of the SVG viewport. Note that in this case the SVG viewport extends               0.5 units to the left and right of the viewBox due to               a uniform scale factor, different ratios for markerWidth/viewBoxWidth               and markerHeight/viewBoxHeight, and 'xMidYMid' alignment --><clipPath >            <rect x="-0.5" y="0" width="4" height="3" />          </clipPath><g clip-path="url(#cp1)" >            <!-- Scale the coordinate system by the uniform scale factor                 markerHeight/viewBoxHeight=3/10=.3 to set the coordinate                 system to viewBox units. --><g transform="scale(.3)" >              <!-- This 'g' element carries all property values that result from                   cascading and inheritance of properties on the original 'marker' element.                   In this example, neither fill nor stroke was specified on the 'marker'                   element or any ancestors of the 'marker', so the initial values of                   "black" and "none" are used, respectively. --><g 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>

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

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

Thepaint-order property controls the order that the threepaint operations thatshapes and text are rendered with:their fill, their stroke and any markers they might have.

When the value of this property isnormal,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 paintoperations for painting the element is as given, from left to right. If any ofthe three keywords are omitted, they are painted last, in the order theywould be painted withpaint-order: normal.

This means that, for example,paint-order: strokehas the same rendering behavior aspaint-order: stroke fill markers.

The following example shows how thepaint-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">pizazz</text>  <text x="450" y="100">pizazz</text></svg>

Text painted with its stroke below the fill.

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

The SVG user agent performs color interpolations and compositingat various points as it processes SVG content. Thecolor-interpolationproperty controls which color space is used for the following graphics operations:

• interpolating betweengradient stops,
• interpolating color when performing color animations with‘animate’,
• andcompositing and blending ofgraphics elements into the current background.

Forfilter effects, thecolor-interpolation-filters property controls which color space is used.[filter-effects-1]

Thecolor-interpolation property chooses between color operationsoccurring in the sRGB color space or in a (light energy linear) linearized RGBcolor space. Having chosen the appropriate color space, component-wise linearinterpolation is used. Values forcolor-interpolation have thefollowing meanings:

auto

Indicates that the user agent can choose either thesRGB orlinearRGB 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 occurs in the sRGB color space.

linearRGB

Indicates that color interpolation occurs in the linearized RGB color space as described below.

The conversion formulas between thesRGB color space (i.e., nonlinear with 2.2 gamma curve) and the linearized RGBcolor space (i.e., color values expressed as sRGB tristimulus values without agamma curve) can be found inthe sRGB specification[SRGB].For illustrative purposes, the following formula shows the conversion fromsRGB to linearized RGB, whereC_srgb is one of thethree sRGB color components,C_linear is the correspondinglinearized RGB color component, and all color values are between 0 and 1:

if C_srgb <= 0.04045  C_linear = C_srgb / 12.92else if c_srgb > 0.04045  C_linear = ((C_srgb + 0.055) / 1.055) ^ 2.4

Out-of-range color values, if supported by the user agent, also areconverted using the above formulas.

When a child element is blended into a background, the value of thecolor-interpolation property on the child determines the type ofblending, not the value of thecolor-interpolation on the parent.Forgradients which make use of the‘href’ attribute to reference anothergradient, the gradient uses thecolor-interpolation property valuefrom the gradient element which is directly referenced by thefill orstroke property. When animating colors, color interpolation isperformed according to the value of thecolor-interpolation propertyon the element being animated.

13.10. Rendering hints

13.10.1. The ‘color-rendering’ property

Thecolor-rendering property provides a hint to the SVG useragent about how to optimize its color interpolation and compositingoperations. Values have the following meanings:

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.

color-rendering takes precedence overcolor-interpolation-filters. For example, assumecolor-rendering: optimizeSpeed andcolor-interpolation-filters: linearRGB.In this case, the SVG user agent should perform color operations in a way thatoptimizes performance, which might mean sacrificing the color interpolationprecision as specified bycolor-interpolation-filters: linearRGB.

13.10.2. The ‘shape-rendering’ property

Theshape-rendering property provides a hint to theimplementation about what tradeoffs to make as it renders vector graphicselements such as‘path’ elements andbasic shapessuch as circles and rectangles. Values have the following meanings:

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.

13.10.3. The ‘text-rendering’ property

Thetext-rendering property provides a hint to the implementationabout what tradeoffs to make as it renders text. Values have thefollowing meanings:

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.

13.10.4. The ‘image-rendering’ property

TheCSS Image Values and Replacement Conent Module Level 4 may in the future redefine this property. In particular it should allow the choice between smoothing and keeping a pixelated look when upscaling.

Theimage-rendering property provides a hint to the implementationabout how to make speed vs. quality tradeoffs as it performsimage processing. Values have the following meanings:

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. Forconforming 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 targetdevice is indexed color. High quality SVG viewers should performimage resampling using a linear color space.

13.11. The effect of the‘will-change’ property

See the CSS Will Change Module Level 1 specification for thedefinition ofwill-change.

Thewill-change property is used to provide a hint to the useragent as to the types of changes that will be made to content, givingthe user agent a better chance at performing rendering optimizationsfor a given element.

Thewill-change property applies to all SVGgraphics elements,however since SVG elements do not support scrolling, thescroll-position value will have no effecton them.

The following example demonstrates howwill-change can be used to forewarn the user agent that an element will have itstransform property changed, with the potential result of the user agent rendering the element into its own GPU layer so that the scriptedtransform changes appear smooth.

<svg xmlns="http://www.w3.org/2000/svg">  <style>    #background { fill: lemonchiffon; }    #star {      fill: cornflowerblue;      stroke: navy; stroke-width: 5px; stroke-linejoin: round;      paint-order: stroke fill;      will-change: transform;    }    text { font: 24px sans-serif; user-select: none; }  </style>  <g onmousemove="drag(evt.clientX, evt.clientY);"     onmouseup="dragging = false;">    <rect width="100%" height="100%"/>    <text x="10" y="30">Drag the star!</text>    <path transform="translate(200,150)"          d="M 0.00,-40.00 -11.76,-16.18 -38.04,-12.36 -19.02,6.18 -23.51,32.36               0.00,20.00 23.51,32.36 19.02,6.18 38.04,-12.36 11.76,-16.18 z"          onmousedown="dragging = true;"/>  </g>  <script>    var dragging = false;    var star = document.getElementById("star");    function drag(x, y) {      if (dragging) {        star.setAttribute("transform", "translate(" + x + "," + y + ")");      }    }  </script></svg>

In a user agent that supportswill-change on SVG elements, the star might be rendered into a layer so that it can be composited quickly when it is dragged around the canvas.View interactive SVG document.

Thewill-change property replaces the‘buffered-rendering’ property defined inSVG Tiny 1.2.

13.12. DOM interfaces

13.12.1. Interface SVGMarkerElement

AnSVGMarkerElement object represents a‘marker’element in the DOM.

[Exposed=Window]interfaceSVGMarkerElement :SVGElement {  // Marker Unit Types  const unsigned shortSVG_MARKERUNITS_UNKNOWN = 0;  const unsigned shortSVG_MARKERUNITS_USERSPACEONUSE = 1;  const unsigned shortSVG_MARKERUNITS_STROKEWIDTH = 2;  // Marker Orientation Types  const unsigned shortSVG_MARKER_ORIENT_UNKNOWN = 0;  const unsigned shortSVG_MARKER_ORIENT_AUTO = 1;  const unsigned shortSVG_MARKER_ORIENT_ANGLE = 2;  [SameObject] readonly attributeSVGAnimatedLengthrefX;  [SameObject] readonly attributeSVGAnimatedLengthrefY;  [SameObject] readonly attributeSVGAnimatedEnumerationmarkerUnits;  [SameObject] readonly attributeSVGAnimatedLengthmarkerWidth;  [SameObject] readonly attributeSVGAnimatedLengthmarkerHeight;  [SameObject] readonly attributeSVGAnimatedEnumerationorientType;  [SameObject] readonly attributeSVGAnimatedAngleorientAngle;  attribute DOMStringorient;  voidsetOrientToAuto();  voidsetOrientToAngle(SVGAngle angle);};SVGMarkerElement includesSVGFitToViewBox;

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

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

ThemarkerUnits IDL attributereflects the‘markerUnits’ content attribute. Thenumeric type values for‘markerUnits’ are asdescribed above in the numeric marker unit type constant table.

TheorientType,orientAngle andorient IDL attributesall reflect the‘orient’ content attribute.Thenumeric type values for‘orient’ are as follows:

TherefX,refY,markerWidth andmarkerHeight IDL attributesreflect the‘refX’,‘refY’,‘markerWidth’and‘markerHeight’ content attributes, respectively.

ThesetOrientToAutomethod is used to set the value of the‘orient’ attributeto'auto'. When setOrientToAuto() iscalled, the‘orient’ attribute is simply set to'auto'.

ThesetOrientToAnglemethod is used to set the value of the‘orient’ attributeto a specific angle value. When setOrientToAngle(angle) iscalled, the‘orient’ attribute isreserialized usingangle as the value.