Scalable Vector Graphics Pattern Examples

Marc Whitlow — Wed, 26 Feb 2014 19:23:23 +0000

Scalable Vector Graphics (SVG) is a markup language for creating two dimensional graphic images. It is commonly used in HTML in combination with CSS and Javascript. If you are new to SVG, I would suggest visiting the W3schools.com SVG Tutorial.

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.

Scale = 2X

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 (): 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 element that will use it. In the 50 x 60 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 element (stroke-width:1; stroke:black;).

SVG Diagonal Dot Pattern

We can take the circles-4-11 pattern above, and rotated it by 45° to produce a diagonal circle pattern using the pattern attribute patternTransform (patternTransform="rotate(45)").

SVG Diagonal Circle Pattern

We can take the dots-4-11 pattern above, and set stroke-width, stroke and fill to 2, green and none, respectively (stroke-width:4; stroke:green; fill:none;) to create green circles.

SVG Diagonal Stripes Pattern

To create a diagonally striped pattern, we fill one half the pattern with a purple rectangle (), and then rotate the pattern by 30° (patternTransform="rotate(30)").

SVG Grid Pattern

To create a grid pattern, we create a plus sign in the pattern using two 4 x 10 rectangles (), one running horizontally (width="10" height="4") and the other running vertically (width="4" height="10") through the 10 x 10 pattern.