feTile (SVG Filter Effect)

The tile filter effect is used to tile the filter effect area with a source picked with the in attribute. Typically, the tile source has a width and height that is smaller than the width and height on the tile filter effect. In the example, the cat image is scaled to accomplish this.

<filter id="tileImages" x="0" y="0" width="100%" height="100%">
  <feImage result="imgSource" xlink:href="cat.jpg" width="20%" height="25%" preserveAspectRatio="xMidYMid slice"  />
  <feTile in="imgSource" />
</filter>
<filter id="tileSelf" x="20" y="20" width="600" height="160" filterUnits="userSpaceOnUse">
  <feOffset in="SourceGraphic" x="20" y="20" width="100" height="30" />
  <feTile /><!-- By default, in is the previous result. -->
</filter>
...
<rect x="20" y="20" width="600" height="160" filter="url(#tileImages)" />
<circle cx="70" cy="80" r="50" fill="white" fill-opacity=".5" filter="url(#tileSelf)" />

The example shows the tiling of the partial image of a circle. This is done by setting the bounding box of the filter to be same as the rectangle. Normally, a filter would use the bounding box centred on the graphic itself which would give no tiling with 'SourceGraphic' and 'SourceAlpha'. The filter effect, feOffset, is used to pick just the top of the circle. The circle and this crop is shown when you hover over the example.

• Defining
• feImage