SVG Fill Patterns

Fill Pattern Example
X, Y, Width and Height
Nested Patterns
Transforming Patterns

Jakob Jenkov
Last update: 2014-06-15

SVG fill patterns are used to fill a shape with a pattern made up from images. This pattern can be made up from SVG images (shapes) or from bitmap images.

SVG fill patterns look like what you are used to from Photoshop etc. being called "tiles".

Fill Pattern Example

Here is a simple svg fill pattern example:

<defs>
  <pattern id="pattern1"
           x="10" y="10" width="20" height="20"
           patternUnits="userSpaceOnUse" >

      <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />

  </pattern>
</defs>

<rect x="10" y="10" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />

First a <pattern> element is defined inside a <defs> element. The pattern contains a circle element. This circle element will be used as a fill pattern.

Second, a <rect> element is declared which references the <pattern> element ID from its style attribute, in the fill CSS property.

Here is the resulting image:

Notice how the circle defined in the <pattern> element is used as fill for the rectangle. Notice also how the circle is repeated over and over again, from left to right, and top to bottom.

X, Y, Width and Height

The x and y attributes of the <pattern> element defines how far into the shape in the <pattern> element the pattern starts.

The width and height attributes of the <pattern> element defines the width and height of the pattern.

Here is the example from the beginning but with x and y set to 0:

<defs>
  <pattern id="pattern2"
           x="0" y="0" width="20" height="20"
           patternUnits="userSpaceOnUse" >

      <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />

  </pattern>
</defs>

<rect x="10" y="10" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />

Here is the resulting image:

Notice how the pattern now starts in the middle of the circle (at the top and left edge of the rectangle). When you create your own fill patterns you will have to play around with the x and y values to achieve the effect you want.

The width and height attributes sets the width and height of the pattern.

In the previous examples width and height were both set to 20, which is the diameter of the circle. Thus the circles repeated over and over again with no space in between.

In this example the width of the pattern is set to 25 instead of 20. Notice that there is now a 5 pixel space between the circles horizontally.

Here is an example with height set to 25 too:

Here is the same example but with x and y set to 10 (the center of the circle inside the <pattern> element):

Now the pattern starts with a full circle, but still has the extra vertical and horizontal space.

Nested Patterns

It is possible to nest fill patterns, so that a fill pattern internally uses another fill pattern. Here is an example that has a rectangle which uses a circle as fill pattern. The circle internally uses a rectangle as fill pattern.

<defs>
    <pattern id="innerPattern"
             x="3" y="3" width="9" height="9"
             patternUnits="userSpaceOnUse"
            >
        <rect x="0" y="0" width="6" height="6"
              style="stroke: none; fill: #ff0000;" />

    </pattern>

    <pattern id="outerPattern"
             x="12" y="12" width="25" height="25"
             patternUnits="userSpaceOnUse"
            >

        <circle cx="10" cy="10" r="10"
            style="stroke: #0000ff; fill: url(#innerPattern)" />

    </pattern>
</defs>

<rect x="10" y="10" width="100" height="100"
      style="stroke: #000000; fill: url(#outerPattern);" />

Here is the resulting image:

As you can see, the outer rectangle is now filled with circles, which again are filled with rectangles.

Transforming Patterns

You can transform fill patterns using the standard SVG transformation functions. You do so using the patternTransform attribute. Here is an SVG pattern transformation example:

<defs>
  <pattern id="transformedPattern"
         x="10" y="10" width="20" height="20"
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(35)"
        >

    <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />

  </pattern>
</defs>

<rect x="10" y="10" width="100" height="100"
      style="stroke: #000000;
             fill: url(#transformedPattern);" />

This example defines a simple pattern which is rotated 35 degrees before being used as fill pattern in a rectangle. Here is the resulting image:

Next: SVG Clip Path

Tweet
	Jakob Jenkov