11.1 Introduction

'path'
elements, 'text'
elements and basic shapes
can be filled
(which means painting the interior of the object) and stroked
(which means painting along the outline of the object).
Filling and stroking both can be thought of in more general terms as
painting operations.

Indicates that the object has no fill (i.e., the interior is transparent).

currentColor

Indicates that the object is. filled with the color specified by
the 'color'
property.
This mechanism is provided to facilitate sharing of color attributes
between parent grammars such as other (non-SVG) XML.
This mechanism allows you to define a style in your HTML which sets
the 'color' property and then pass that style to the SVG user agent
so that your SVG text will draw in the same color.

<color>
[icc-color(<name>,<icccolorvalue>[,<icccolorvalue>]*)]

<color> is the explicit color (in the sRGB [SRGB]
color space) to be used to fill the current object.
SVG supports all of the syntax alternatives for <color> defined in [CSS2].
If an optional ICC color specification is provided, then the user agent
searches the color profile description database for an color profile description
entry whose name descriptor matches <name> and uses the last
matching entry that is found. (If no match is found, then the ICC color
specification is ignored.) The comma-separated list (with optional white space)
of <icccolorvalue>'s
is a set of ICC-profile-specific color values, expressed as <number>s.
On platforms which support ICC-based color management, the icc-color
gets precedence over the <color> (which is in the sRGB color
space).
Note that color interpolation occurs in an RGB color space even if
an ICC-based color specification is provided
(see 'color-interpolation').
Percentages are not allowed on <icccolorvalue>'s.
For more on ICC-based colors, refer to
Color profile descriptions.

The <uri> is how you identify a fancy paint style such as
a gradient, a pattern or a custom paint from extensibility.
The <uri> provides. the ID of the paint server (e.g., a gradient
or a pattern)
to be used to paint the current object.
If the URI reference
is not valid (e.g., it points to an object that doesn't exist or the
object is not a valid paint server), then the paint method following
the <uri> (i.e., none | currentColor |
<color>
[icc-color(<name>,<icccolorvalue>[,<icccolorvalue>]*)]|
inherit) is used if provided; otherwise, the document is in error (see Error processing).

11.3 Fill Properties

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

The fill operation automatically closes all open subpaths by connecting
the last point of the subpath with the first point of the subpath before
painting the fill. Thus, fill operations apply to both
open subpaths within 'path' elements
(i.e., subpaths without a closepath command) and
'polyline' elements.

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

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

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:

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:

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

11.4 Stroke Properties

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

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

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

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

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

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

When two line segments meet at a sharp angle and miter
joins have been specified for 'stroke-linejoin',
it is possible for the miter to extend far beyond the thickness of
the line stroking the path.
The 'stroke-miterlimit'
imposes a limit on the ratio of the miter length to the 'stroke-linewidth'.

<miterlimit>

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

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

none

Indicates that no dashing is used.
If stroked, the line is drawn solid.

11.5 Controlling visibility

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

The differences between the two properties are as follows:

When applied to a container element, setting
'display'
to none causes the container and all of its children
to be invisible; thus, it acts on groups of elements as a group.
'visibility', however,
only applies to individual graphics elements. Setting
'visibility'
to hidden on a
'g' will only make
its children invisible if the children set their own
'visibility'
properties to inherit (or, of course, hidden).
Note that 'visibility'
is not an inheritable property.

When the 'display'
property is set to none, then rendering occurs as if the
given element and its children were not in the document.
With 'visibility'
set to hidden, however, processing occurs as if the element were
still in the document and still taking up space, but just not rendered onto the canvas.
This distinction has implications for the
'tspan',
'tref' and
'glyphRun'
elements and event processing.
If 'display'
is set to none on a
'tspan',
'tref' or
'glyphRun' element,
then the text string is ignored for the purposes of text layout; however, if
'visibility'
is set to hidden, the text string is used for text layout
(i.e., it takes up space)
even though it is not rendered on the canvas. Regarding events,
if 'display'
is set to none, the element receives no events; however,if
'visibility'
is set to hidden, the element might still receive events,
depending on the value of property
'pointer-events'.

A value of display: none
indicates that the given element and its children shall not be rendered (i.e.,
document rendering occurs as if the given element and its children were not part of the document).
Any value other than none or
inherit
indicates that the given element shall be rendered by the SVG user agent.

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

The current graphics element is invisible (i.e., nothing is painted on the canvas).

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

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

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

11.6 Markers

11.6.1 Introduction

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

markerUnits
indicates how to interpret the values of markerWidth
and markerHeight
(described as follows).
If markerUnits="strokeWidth" (the default), then markerWidth and markerHeight represent scale factors relative to the stroke width in place for graphic object referencing the marker.
If markerUnits="userSpaceOnUse", then markerWidth and markerHeight represent values in the current user coordinate system in place at the time when the 'marker' element is referenced (i.e., the user coordinate system for the element referencing the 'marker' element via the 'marker', 'marker-start', 'marker-mid' or 'marker-end' property).
If markerUnits="userSpace", then markerWidth and markerHeight represent values in the user coordinate system in place for the graphic object referencing the marker.

If attribute markerUnits is not specified,
then the effect is as if a value of strokeWidth were specified.
Animatable: yes.

The X-axis coordinate of the reference point which is to be aligned exactly
at the marker position. The coordinate is defined in the coordinate system
after application of the
viewBox and
preserveAspectRatio attributes.
If the attribute is not specified, the effect is as if a value of "0" were specified.Animatable: yes.

The Y-axis coordinate of the reference point which is to be aligned exactly
at the marker position. The coordinate is defined in the coordinate system
after application of the
viewBox and
preserveAspectRatio attributes.
If the attribute is not specified, the effect is as if a value of "0" were specified.Animatable: yes.

Represents the width of the temporary viewport that is to be created
when drawing the marker.
A negative value is an error (see Error processing).
A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of "3" were specified.Animatable: yes.

Represents the height of the temporary viewport that is to be created
when drawing the marker.
A negative value is an error (see Error processing).
A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of "3" were specified.Animatable: yes.

Indicates how the marker is rotated.
A value of auto
indicates that the marker is oriented such that its positive X-axis
is pointing in a direction that is the average of the ending direction
of path segment going into the vertex and the starting direction of
the path segment going out of the vertex. (Refer to 'path' element implementation notes
for a more thorough discussion directionality of path segments.) A
value of <angle>
represents a particular orient in the user space of the graphic object
referencing the marker.
For example, if a value of "0" is given, then the marker will be drawn
such that its X-axis will align with the X-axis of the user space of
the graphic object referencing the marker.
If the attribute is not specified, the effect is as if a value of "0" were specified.Animatable: yes (non-additive, 'set' and 'animate' elements only).

Markers are drawn such that their reference point (i.e., attributes
refX and
refY)
is positioned at the given vertex.

11.6.3 Marker properties

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

Indicates that no marker symbol shall be drawn at the given vertex (vertices).

<uri>

The <uri> is a URI reference
to the ID of a 'marker'
element which shall be used as the arrowhead symbol or polymarker at
the given vertex (vertices).
If the URI reference
is not valid (e.g., it points to an object that is undefined or the
object is not a 'marker'
element), then the marker(s) shall not be drawn.

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

11.6.4 Details on how markers are rendered

Each marker is drawn into a temporary viewport. The temporary viewport and its associated
temporary viewport coordinate system
are such that:

The axes of the temporary viewport coordinate system are aligned according to the
orient
attribute on the 'marker' element
and the slope of the curve at the given vertex.
(Note: if there is a discontinuity at a vertex, the slope is the average of the slopes
of the two segments of the curve that join at the given vertex. If a slope cannot be determined,
the slope is assumed to be zero.)

The size of a single unit in X and Y in the temporary viewport coordinate system
(and correspondingly in the user coordinate system associated with that viewport)
is determined by the value of attribute
markerUnits.
If markerUnits
equals strokeWidth, the temporary viewport coordinate system
is scaled by the current value of property
'stroke-width'.
If markerUnits
equals userSpaceOnUse, then no extra scale transformation is applied.
If markerUnits
equals userSpace, then a scale transformation is applied
to map X-axis and Y-axis length measurements in the current user coordinate system to the corresponding
X-axis and Y-axis length measurements
in the user coordinate system of the
'marker' element such
that the length measurements represent the same distances within the initial viewport coordinate system.

Attributes
markerWidth and
markerHeight
on the
'marker' element
determine the width and height of the temporary viewport expressed in the temporary viewer
coordinate system.

The origin of the temporary viewport coordinate system is at a point
translated from the given vertex by
(-markerWidth * refX / viewBoxWidth, -markerHeight * refY / viewBoxHeight)
in the temporary viewport coordinate system, where:

refX and refY
are the values of attributes
refX and
refY
on the
'marker' element

viewBoxWidth and viewBoxHeight
are the width and height values on
on the viewBox attribute
on the 'marker' element,
respectively.
If the viewBox attribute
is not specified, then viewBoxWidth and
viewBoxHeight are assumed to have the same values as
markerWidth and
markerHeight.

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000629//EN"
"http://www.w3.org/TR/2000/WD-SVG-20000629/DTD/svg-20000629.dtd">
<svg width="4in" height="3in"
viewBox="0 0 4000 3000" >
<desc>File which produces the same effect
as the marker example file, but without
using markers.
</desc>
<!-- The path draws as before, but without the marker properties -->
<path d="M 1000 1000 L 2000 1000 L 2500 1500"
style="fill:none; stroke:black; stroke-width:100" />
<!-- The following logic simulates drawing a marker
at final vertex of the path. -->
<!-- First off, move the origin of the user coordinate system
so that the origin is now aligned with the end point of the path. -->
<g transform="translate(2500,1500)" >
<!-- Now, rotate the coordinate system 45 degrees because
the marker specified orient="auto" and the final segment
of the path is going in the direction of 45 degrees. -->
<g transform="rotate(45)" >
<!-- Now, scale the coordinate system by the current value of
the 'stroke-width' property, which is 100. -->
<g transform="scale(100)" >
<!-- Now, translate the coordinate system by
(-markerWidth * refX / viewBoxWidth, -markerHeight * refY / viewBoxHeight)
so that (refX,refY) within the marker will align with the vertex.
Since refX is zero, there is no horizontal translation.
Since markerWidth is 3, refY is 5 and height of the viewBox is 10,
translate in Y by -3*5/10 = -1.5 -->
<g transform="translate(0,-1.5)" >
<!-- Establish a new viewport with an 'svg' element.
The width/height of the viewport are 2 and 3 times
the current stroke-width. -->
<svg width="2" height="3" viewBox="0 0 10 10"" >
<!-- Expand out the contents of the 'marker' element. -->
<path d="M 0 0 L 10 5 L 0 10 z" /></svg></g></g></g></g>
</svg>

Indicates that the user agent can choose either the sRGB
or linearRGBspaces for
color interpolation.
This option indicates that the author doesn't require that color interpolation
occur in a particular color space.

sRGB

Indicates that color interpolation should occur in the sRGB color space.

linearRGB

Indicates that color interpolation should occur in the linearized
RGB color space as described above.

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

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

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.

Indicates that the user agent shall make appropriate tradeoffs to
balance speed, legibility and geometric precision, but with legibility
given more importance than speed and geometric precision.

optimizeSpeed

Indicates that the user agent shall emphasize rendering speed over
legibility and geometric precision.
This option will sometimes cause the user agent to turn off text anti-aliasing.

optimizeLegibility

Indicates that the user agent shall emphasize legibility over rendering
speed and geometric precision.
The user agent will often choose whether to apply anti-aliasing techniques,
built-in font hinting or both to produce the most legible text.

geometricPrecision

Indicates that the user agent shall emphasize geometric precision
over legibility and rendering speed.
This option will usually cause the user agent to suspend the use of
hinting so that glyph outlines are drawn with comparable geometric
precision to the rendering of path data.

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

Indicates that the user agent shall make appropriate tradeoffs to
balance speed and quality, but quality shall be given more importance than speed.

optimizeSpeed

Indicates that the user agent shall emphasize rendering speed over
quality.
This option will sometimes cause the user agent to use a bilinear image
resampling algorithm.

optimizeQuality

Indicates that the user agent shall emphasize quality over rendering
speed.
This option will sometimes cause the user agent to use a bicubic image
resampling algorithm.

11.8 Inheritance of painting properties

The values of any of the painting properties described in this chapter
can be inherited from a given object's parent.
Painting, however, is always done on each leaf-node individually, never
at the 'g'
level.
Thus, for the following SVG, even though the gradient fill is specified on the
'g',
the gradient is simply inherited through the
'g'
element down into
each rectangle, each of which is rendered such that its interior is painted with the gradient.

The paint type is not one of predefined types.
It is invalid to attempt to define a new value of this type
or to attempt to switch an existing value to this type.

SVG_PAINTTYPE_RGBCOLOR

An sRGB color has been specified without an alternative ICC color specification.

SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR

An sRGB color has been specified along with an alternative ICC color specification.

SVG_PAINTTYPE_NONE

Corresponds to a 'none' value on a <paint> specification.

SVG_PAINTTYPE_CURRENTCOLOR

Corresponds to a 'currentColor' value on a <paint> specification.

SVG_PAINTTYPE_URI_NONE

A URI has been specified, along with either an explicit or an implicit 'none' as
the backup paint method in case the URI is unavailable or invalid.

SVG_PAINTTYPE_URI_CURRENTCOLOR

A URI has been specified, along with 'currentColor' as
the backup paint method in case the URI is unavailable or invalid.

SVG_PAINTTYPE_URI_RGBCOLOR

A URI has been specified, along with an sRGB color as
the backup paint method in case the URI is unavailable or invalid.

SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR

A URI has been specified, along with both an sRGB color and alternate ICC color as
the backup paint method in case the URI is unavailable or invalid.

Attributes

readonly unsigned shortpaintType

The type of paint, identified by one of the constants above.

readonly DOMStringuri

When the paintType specifies a URI, this attribute holds the URI string. When the paintType does not
specify a URI, this attribute is null.

Methods

setUri

Sets the paintType to SVG_PAINTTYPE_URI_NONE and sets uri
to the specified value.

Parameters

in
DOMStringuri

The URI for the desired paint server.

No Return Value

No Exceptions

setPaint

Sets the paintType as specified by the parameters.
If paintType requires a URI, then uri must be non-null and a valid string;
otherwise, uri must be null.
If paintType requires an RGBColor, then rgbColor must be a valid RGBColor object;
otherwise, rgbColor must be null.
If paintType requires an SVGICCColor, then iccColor must be a valid SVGICCColor object;
otherwise, iccColor must be null.