An SVG pattern is used to fill any SVG element such as a circle, line or rectangle. In this post I will give several examples of SVG patterns, and describe how they are constructed. The technical documentation on SVG 1.1 (Second Edition) can be found at http://www.w3.org/TR/SVG11/pservers.html.
Basic Setup of an SVG Pattern
The pattern is defined in a defs element in an svg element, and referenced in the fill attribute of the SVG element using a url link to the pattern. Shown below is a simple dot pattern. The dot pattern is made up of a circle element in a pattern element.
Scale = 2X
The circle element in this example has a radius of 4 (r=”4″) and is centered at 5,5 (cx=”5″ and cy=”5″). The image of the filled circle has been enlarged two-fold.
Circle element in pattern element: The circle element above is placed in a pattern element that has a width and height of 11 (width="11" height="11"). The pattern has the Id (id="dots-4-11") used to link to in other SVG elements, and patternUnits="userSpaceOnUse" attributes. I have put a box around the pattern in the figure to our left that is not part of the dots-4-11 pattern.
Using the dots-4-11 pattern in an SVG rectangle element (<rect>): A pattern is repeated both vertically and horizontally to completely fill SVG element they are referenced in. The dots-4-11 pattern is placed in a defs element above the the SVG <rect> element that will use it. In the 50 x 60 <rect> element, the dots-4-11 pattern is linked to the pattern in the style attribute using the link url(#dots-4-11). A 1 pixel boarder has been add to the <rect> element (stroke-width:1; stroke:black;).
To create a grid pattern, we create a plus sign in the pattern using two 4 x 10 rectangles (<rect>), one running horizontally (width="10" height="4") and the other running vertically (width="4" height="10") through the 10 x 10 pattern.