<pattern>

The <pattern> tag is used in SVG to define a pattern (pattern) that can be used to fill or outline other elements.

It allows you to create complex designs by repeating shapes, images, or patterns.

Structure and syntax of the <pattern> tag

Structure

Here is a basic example:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="dots" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <circle cx="5" cy="5" r="2" fill="blue" />
        </pattern>
    </defs>

    <rect x="0" y="0" width="200" height="200" fill="url(#dots)" />
</svg>

In this example:

• The <pattern> tag defines a pattern called dots with its id attribute;
• The pattern is a blue circle with a radius of 2 (r) that repeats every 10 pixels in width and height;
• The pattern is applied as a fill to a rectangle with fill="url(#dots)".

Here is the result:

Advanced example

Here is a more complex example using shapes and colors:

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="diagonalStripes" width="10" height="10" patternUnits="userSpaceOnUse">
            <rect width="10" height="10" fill="lightgray" />
            <line x1="0" y1="10" x2="10" y2="0" stroke="red" stroke-width="2" />
        </pattern>
    </defs>

    <rect x="0" y="0" width="300" height="300" fill="url(#diagonalStripes)" />
</svg>

In this example:

• A pattern with red diagonal stripes (<line>) is created on a light gray background (<rect> in the <pattern> tag);
• The pattern is applied as a fill to a large rectangle with fill on the <rect> tag.

Try it yourself:

Attributes of the <pattern> tag

The <pattern> tag handles several attributes:

Browser compatibility

The <pattern> tag is widely supported by modern browsers: