SVG <pattern> Element (original) (raw)

Last Updated : 31 Mar, 2022

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

Syntax:

. . .

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 `

            <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>

`

Output:

Example 2:

HTML `

            <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>

`

Output: