Open In App

SVG feTile Element

Improve
Improve
Like Article
Like
Save
Share
Report

The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image.

Syntax:

<feTile in="" x="" y="" width="" height="" />

Attributes:

  • in: The in attribute identifies input for the given filter primitive. 
  • x: It defines x-axis coordinate in the user coordinate system.
  • y: It defines y-axis coordinate in the user coordinate system
  • width: The width of the foreignObject.
  • height: The height of the foreignObject.

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200">
        <filter id="feOffset" x="-40" y="-20" 
            width="100" height="200">
            <feOffset in="SourceGraphic" dx="60" dy="60" />
            <feGaussianBlur stdDeviation="5" result="blur2" />
  
            <feTile in="SourceGraphic" x="50" 
                y="50" width="100" height="100" />
            <feTile />
  
        </filter>
  
  
        <rect x="1" y="1" width="198" height="118" 
            fill="green" stroke="blue" />
        <circle cx="100" cy="60" r="55" stroke="black" 
            stroke-width="3" fill="white" />
        <g fill="#FFFFFF" stroke="Green" font-size="10" 
            font-family="Verdana">
            <text x="60" y="62">GeeksForGeeks</text>
    </svg>
</body>
  
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200">
        <defs>
            <filter id="tile" x="0" y="0" 
                width="100%" height="100%">
                <feTile in="BackgroundImage" x="50" 
                    y="50" width="100" height="100" />
                <feTile />
            </filter>
        </defs>
  
        <image xlink:href=
            "C:/Users/pc/Desktop/gfg/capture42.png" 
            x="10%" y="10%" width="80%" height="80%"
            style="filter:url(#tile);" />
    </svg>
</body>
  
</html>


Output :

Example 3:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200">
        <defs>
            <filter id="tile" x="0" y="0" 
                width="100%" height="100%">
                <feTile in="FillPaint" x="100" 
                    y="100" width="120" height="120" />
                <feTile />
            </filter>
        </defs>
  
        <image xlink:href=
            "C:/Users/pc/Desktop/gfg/capture25.png" 
            x="10%" y="10%" width="80%" height="80%"
            style="filter:url(#tile);" />
    </svg>
</body>
  
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads