SVG Filling Pattern

SVG fill patterns are used to fill shapes with patterns composed of images. The pattern can be composed of SVG images (shapes) or bitmap images. SVG fill patterns look like what you are accustomed to in Photoshop and others, known as 'tiling'.

Fill pattern example

This is a simple SVG fill pattern example:

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"1" x="10"　y="10"　width="20"　height="20" patternunits="userSpaceOnUse">
　　　　　　　　　　　　<circle　cx="10"　cy="10"　r="10" style="stroke: none; fill: #0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100" style="stroke: #000000; fill: url(#pattern1);"></rect>
</svg>

Firstly, define the <pattern> element within the <defs> element. The pattern contains a circle element. This circle element will be used as the fill pattern.

Secondly, in the CSS properties<rect>Declare an elementfill, which refers to<pattern>itsstyleelement ID in the attribute.

Secondly, declare a <rect> element that refers to the <pattern> element in its style attribute ID in the CSS fill property.

Image effect after running:

Note how the circle defined in the <pattern> element is used as the fill for the rectangle. Also, note how the circles are repeated from left to right and from top to bottom continuously.

X, Y, width, and height

The x and y attributes of the <pattern> element define the distance of the pattern's starting shape within the <pattern> element.

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

This is an example starting from scratch, and it willxandyset to 0:

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"2"
　　　　　　　　　　　　　　　　　x="0" y="0" width="20"　height="20"
　　　　　　　　　　　　　　　　　patternUnits="userSpaceOnUse">
　　　　　　　　<circle　cx="10"　cy="10"　r="10" style="stroke: none; fill: #0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke: #000000; fill: url(#pattern"2);"　/>
</svg>

Image effect after running:

Note that the pattern now starts from the center of the circle (at the top and left of the rectangle). When creating your own fill patterns, you will usexandyattribute values to achieve the desired effect.

widthandheightattributes set the width and height of the pattern.

In the previous examplewidth,heightThey are both set to20, which is the diameter of the circle. Therefore, the circles repeat over and over again without any gaps in the middle.

In this example, the pattern's width (width) is set to25instead of20. Note that now there is5pixel interval.

This is also anheightset to25 Example:

Here is the same instance, but x and y are set to10 (Center of the circle within the <pattern> element):

Now, the pattern starts from a complete circle, but there is still excess vertical and horizontal space.

Nested Pattern

Nested fill patterns can be used so that the fill pattern uses another fill pattern internally. This is an example of a rectangle that uses a circle as a fill pattern. The circle internally uses a rectangle as a fill pattern.

<svg width="500" height="150">　　　　
<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);"　/>　　　　
</svg>

Image effect after running:

As you can see, the outer rectangle is now filled with a circle, and the circle is filled with a rectangle.

Pattern Transformation

You can use standard SVG transformation functions to convert fill patterns. You can achieve this by using the patternTransform attribute. Here is an example of an SVG pattern transformation:

<svg width="500" height="150">　　　　
<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);"　/>　　　　
</svg>

This example defines a simple pattern, which is rotated before being used as the filling pattern of the rectangle35After running the image effect: