The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a <pattern>.
Usage context
| Categories | Filter primitive element |
|---|---|
| Permitted content | Any number of the following elements, in any order:<animate>, <set> |
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGFETileElement interface.
Example
SVG
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="tile" x="0" y="0" width="100%" height="100%">
<feOffset in="SourceGraphic" x="50" y="50"
width="100" height="100" />
<feTile/>
</filter>
</defs>
<image xlink:href="/files/6457/mdn_logo_only_color.png"
x="10%" y="10%" width="80%" height="80%"
style="filter:url(#tile);"/>
</svg>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| Filter Effects Module Level 1 The definition of '<feTile>' in that specification. |
Working Draft | No change |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<feTile>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | 4 | Yes | 9 | ? |
in | Yes | Yes | 4 | Yes | 9 | ? |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | ? | Yes | Yes | Yes | ? | ? | ? |
in | ? | Yes | Yes | Yes | ? | ? | ? |