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:
Example
<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="patt1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="red" />
</pattern>
</defs>
<rect width="200" height="100"
x="0" y="0" stroke="black" fill="url(#patt1)"
/>
</svg>
Try it Yourself »
Code explanation:
- The
id
attribute of the<pattern>
element defines a unique name for the pattern - The
x
andy
attributes of the<pattern>
element defines how far into the shape the pattern starts - The
width
andheight
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:
Example
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1">
<stop
offset="0%" stop-color="white" />
<stop
offset="100%" stop-color="red" />
</linearGradient>
<pattern id="patt2" x="0" y="0" width="0.25" height="0.25">
<rect x="0" y="0" width="50" height="50" fill="lightblue" />
<circle cx="25" cy="25" r="20" fill="url(#grad1)" fill-opacity="0.8" />
</pattern>
</defs>
<rect width="200"
height="200" x="0" y="0" stroke="black" fill="url(#patt2)" />
</svg>
Try it Yourself »
Code explanation:
- The
id
attribute of the<pattern>
element defines a unique name for the pattern - The
x
andy
attributes of the<pattern>
element defines how far into the shape the pattern starts - The
width
andheight
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