SVG <pattern> Element

Last Updated : 31 Mar, 2022

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations in HTML canvas. The <pattern> element is used to fill shapes with patterns made up of images. It fills the shapes in a tiled fashion.

Syntax:

<pattern> . . .  </pattern>

Attributes:

patternUnits: It defines the co-ordinates of x, y, height and width.
patternContentUnits: It defines the region of the pattern.
preserveAspectRatio: It shows an element with a viewBox giving a aspect ratio must fit into a viewport with a different aspect ratio.
xlink:href: It defines a reference IRI to a resource.

Example 1:

HTML

<!DOCTYPE html>
<html>

<body>
    <svg width="200" height="200">
        <defs>
            <pattern id="pattern" x="0" y="0"
                width="10" height="10" 
                patternUnits="userSpaceOnUse">
            
                <circle cx="10" cy="10" r="10"
                    style="stroke:lightgreen; 
                        fill:white" />
            </pattern>
        </defs>

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

        <g fill="#FFFFFF" stroke="black" 
            font-size="12" font-family="Verdana">
        
        <text x="13" y="65">
            GeeksForGeeks
        </text>
    </svg>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<body>
    <svg width="300" height="350">
        <defs>
            <pattern id="in" x="2" y="2" 
                width="6" height="6" 
                patternUnits="userSpaceOnUse">

                <rect x="2" y="2" width="4" 
                    height="8" stroke="green" 
                    fill="red" />
            </pattern>

            <pattern id="out" x="13" y="13" 
                width="50" height="50" 
                patternUnits="userSpaceOnUse">

                <circle cx="4" cy="4" r="18" 
                    stroke="black" 
                    stroke-width="4px" 
                    fill="url(#in)" />
            </pattern>
        </defs>

        <rect x="1" y="5" width="200" 
            height="200" stroke="green" 
            fill="url(#out)" />
    </svg>
</body>

</html>