A pattern is used to fill or stroke an object using a predefined
graphic object which can be replicated ("tiled")
at regular intervals so as to cover all the area of the
object.
Using a pattern requires a <pattern> element surrounding
the content to be tiled. Here is the syntax:
Note that the <pattern> elements are never
rendered directly; their only usage is referenced using
the fill and stroke properties.
Pattern Attributes
This <pattern> element has several attributes
that define how the tiled content will be displayed.
Attributes
Description
x,y
Determine the top left-most position
of the first tiled object within the object using
the tile.
width & height
Define the respective distances
between the top left-most edge of the first tiled
object and its neighboring objects.
patternUnits
Defines the coordinate system
for attributes x, y, width, height.
If patternUnits="userSpaceOnUse", x, y,
width, height represent values in the coordinate system
that results from taking the current user coordinate
system in place at the time when the 'pattern' element
is referenced via a 'fill' or 'stroke' property and
then applying the transform specified by attribute
patternTransform.
If patternUnits="objectBoundingBox", the
user coordinate system for attributes x, y, width,
height is established using the bounding box of the
element to which the pattern is applied (see Object
bounding box units) and then applying the transform
specified by attribute patternTransform.
If attribute patternUnits is not specified, the default
value is "objectBoundingBox".
Here are the examples:
Code Example
SVG Image
<?xml version="1.0"
standalone="no"?>
Right-click
on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full
window to zoom & pan the image.
(SVG Viewer Tips)
<!DOCTYPE svg PUBLIC "-//W3C//DTD
SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--
To apply the pattern to an object -->
<rect x="11" y="11"
width="80" height="80" style="fill:url(#circle_pattern);
stroke:black; stroke-width:2;" />
Patterns are defined using a <pattern>
element and then referenced by properties fill
and stroke on a given graphics element to
indicate that the given element shall be filled or
stroked with the referenced pattern.
First, we create a pattern element and name the element
with the id attribute (such as "circle_pattern",
"square_pattern" in the above examples).
The x and y attributes (0,0) define the object to
be tiled starts in the very top-left corner of the
applied object. The value of width and height attributes
(13,13) are specified so the object is repeated equidistant
along each axis.
With the pattern element is created, we then define
its tiling content: a red-filled circle with radius
5 (1st example) and a 8-by-8, blue-filled square (2nd
example).
To apply the pattern to an object, we add the style
rule fill:url(#PatternID), where PatternID
is the name of the pattern's id value. As a result,
the red circle comes repeated so as to to cover the
entire surface of the rectangle while the a pattern
of blue squares fills up the a circle.
Code explanation
Painting & Effects 
