Scalable Vector Graphics Pattern Examples

Posted on February 26, 2014 by Marc Whitlow

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.

<circle x="1" y="1" cx="5" cy="5" r="4" style="stroke:none; fill:red;" />


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.

<pattern id="dots-4-11" x="0" y="0" width="11" height="11" patternUnits="userSpaceOnUse">
    <circle cx="5" cy="5" r="4" style="stroke:none; fill:red;" />
</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;).

<svg height="50" width="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <pattern id="dots-4-11" x="0" y="0" width="11" height="11" patternUnits="userSpaceOnUse">
         <circle cx="5" cy="5" r="4" style="stroke:none; fill:red;" />
      </pattern>
   </defs>

   <rect x="1" y="1" height="48" width="58" style="stroke-width:1; stroke:black; fill:url(#dots-4-11);" />
</svg>

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)").

<pattern id="diagonal-dots-4-11" x="0" y="0" width="11" height="11" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
   <circle cx="5" cy="5" r="4" style="stroke:none; fill:blue;" />
</pattern>

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.

<pattern id="diagonal-circles-4-11" x="0" y="0" width="11" height="11" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
   <circle cx="5" cy="5" r="4" style="stroke-width:2; stroke:green; fill:none;" />
</pattern>

SVG Diagonal Stripes Pattern

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

<pattern id="diagonal-stripes-4-8" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
   <rect x="0" y="0" width="4" height="8" style="stroke:none; fill:purple;" />
</pattern>

SVG Grid Pattern

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.

<pattern id="grid-4-10" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
   <rect x="0" y="0" width="10" height="4" style="stroke:none; fill:orange;" />
   <rect x="3" y="3" width="4" height="10" style="stroke:none; fill:orange;" />
</pattern>

A grid can be changed into a plaid pattern by changing the fill-opacity to 0.5.

Posted in Technical | Tagged , , | Leave a comment