SVG Patterns

SVG Patterns - <pattern>

The <pattern> element is used to create a graphic that is redrawn at repeated x and y coordinate intervals, to cover an area.

All SVG patterns are defined within a <defs> element. The <defs> element is short for "definitions", and contains definition of special elements (such as patterns).

The <pattern> element has a required id attribute which identifies the pattern. The graphic/image then points to the pattern to use.

Then, inside the <pattern> element, we put one or more elements that will be used as the fill pattern.

A Simple Pattern Example

The following example creates a rectangle filled with small circles:

Here is the SVG code:

Code explanation:

• The id attribute of the <pattern> element defines a unique name for the pattern
• The x and y attributes of the <pattern> element defines how far into the shape the pattern starts
• The width and height attributes of the <pattern> element defines the width and height of the pattern
• The <circle> element inside the <pattern> element defines the shape of the fill pattern
• The fill="url(#patt1)" attribute of the <rect> element points to the "patt1" pattern
• The rectangle will be filled with the pattern

A Pattern with Gradient

The following example creates a rectangle filled with small light blue rectangles and gradient circles:

Here is the SVG code:

Code explanation:

• The id attribute of the <pattern> element defines a unique name for the pattern
• The x and y attributes of the <pattern> element defines how far into the shape the pattern starts
• The width and height attributes of the <pattern> element defines the width and height of the pattern. We want the pattern to repeat 4 times horizontally and 4 times vertically, so we set the height and width to 0.25 (meaning that the pattern's width and height is 25% of the total box size)
• The <rect> element inside the <pattern> element defines one shape of the fill pattern (a lightblue 50x50 rectangle)
• The <circle> element inside the <pattern> element defines another shape of the fill pattern (a gradient circle that goes from white to red)
• The fill="url(#grad1)" attribute of the <circle> element points to the "grad1"gradient
• The fill="url(#patt2)" attribute of the <rect> element points to the "patt2" pattern
• The rectangle will be filled with the pattern