filter

  • Revision slug: SVG/Element/filter
  • Revision title: filter
  • Revision id: 308543
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

{{ SVGRefElem() }}

The filter element serves as container for atomic filter operations. It is never rendered directly. A filter is referenced by using the {{ SVGAttr("filter") }} attribute on the target SVG element.

Usage context

Categories None
Permitted content Any number of the following elements, in any order:
descriptive elements »
filter primitive elements »
{{ SVGElement("animate") }}, {{ SVGElement("set") }}
Normative document SVG 1.1 (2nd Edition)

Example

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("x") }}
  • {{ SVGAttr("y") }}
  • {{ SVGAttr("width") }}
  • {{ SVGAttr("height") }}
  • {{ SVGAttr("filterRes") }}
  • {{ SVGAttr("filterUnits") }}
  • {{ SVGAttr("primitiveUnits") }}
  • {{ SVGAttr("xlink:href") }}

DOM Interface

This element implements the SVGFilterElement interface.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop('2.0') }} {{ CompatIE('10.0') }} {{ CompatOpera('2.0') }} {{ CompatSafari('3.0') }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatGeckoMobile('2.0') }} {{ CompatNo() }} {{ CompatPrestoMobile('2.0') }} {{ CompatSafari('3.0') }}[1]

[1] There is some remaining issues in Webkit browsers.

The chart is based on these sources.

See also

  • {{ SVGElement("feBlend") }}
  • {{ SVGElement("feColorMatrix") }}
  • {{ SVGElement("feComponentTransfer") }}
  • {{ SVGElement("feComposite") }}
  • {{ SVGElement("feConvolveMatrix") }}
  • {{ SVGElement("feDiffuseLighting") }}
  • {{ SVGElement("feDisplacementMap") }}
  • {{ SVGElement("feFlood") }}
  • {{ SVGElement("feGaussianBlur") }}
  • {{ SVGElement("feImage") }}
  • {{ SVGElement("feMerge") }}
  • {{ SVGElement("feMorphology") }}
  • {{ SVGElement("feOffset") }}
  • {{ SVGElement("feSpecularLighting") }}
  • {{ SVGElement("feTile") }}
  • {{ SVGElement("feTurbulence") }}
  • SVG tutorial: Filter effects

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>The <code>filter</code> element serves as container for atomic filter operations. It is never rendered directly. A filter is referenced by using the {{ SVGAttr("filter") }} attribute on the target SVG element.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Permitted content</th>
      <td>Any number of the following elements, in any order:<br />
        <a href="/en/SVG/Element#Descriptive" title="en/SVG/Element#Descriptive">descriptive elements</a>&nbsp;»<br />
        <a href="/en/SVG/Element#Filter" title="en/SVG/Element#Filter">filter primitive elements</a>&nbsp;»<br />
        {{ SVGElement("animate") }}, {{ SVGElement("set") }}</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElement" title="http://www.w3.org/TR/SVG/filters.html#FilterElement">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>
<ul>
  <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a>&nbsp;»</li>
  <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a>&nbsp;»</li>
  <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">XLink attributes</a>&nbsp;»</li>
  <li>{{ SVGAttr("class") }}</li>
  <li>{{ SVGAttr("style") }}</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
</ul>
<h3 id="Specific_attributes">Specific attributes</h3>
<ul>
  <li>{{ SVGAttr("x") }}</li>
  <li>{{ SVGAttr("y") }}</li>
  <li>{{ SVGAttr("width") }}</li>
  <li>{{ SVGAttr("height") }}</li>
  <li>{{ SVGAttr("filterRes") }}</li>
  <li>{{ SVGAttr("filterUnits") }}</li>
  <li>{{ SVGAttr("primitiveUnits") }}</li>
  <li>{{ SVGAttr("xlink:href") }}</li>
</ul>
<h2 id="DOM.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGFilterElement" title="en/DOM/SVGFilterElement">SVGFilterElement</a></code> interface.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th scope="col">Feature</th>
        <th scope="col">Chrome</th>
        <th scope="col">Firefox (Gecko)</th>
        <th scope="col">Internet Explorer</th>
        <th scope="col">Opera</th>
        <th scope="col">Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop('2.0') }}</td>
        <td>{{ CompatIE('10.0') }}</td>
        <td>{{ CompatOpera('2.0') }}</td>
        <td>{{ CompatSafari('3.0') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatGeckoMobile('2.0') }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatPrestoMobile('2.0') }}</td>
        <td>{{ CompatSafari('3.0') }}[1]</td>
      </tr>
    </tbody>
  </table>
</div>
<p id="compatWebkit">[1] There is <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=26389">some remaining issues</a> in Webkit browsers.</p>
<p>The chart is based on <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">these sources</a>.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ SVGElement("feBlend") }}</li>
  <li>{{ SVGElement("feColorMatrix") }}</li>
  <li>{{ SVGElement("feComponentTransfer") }}</li>
  <li>{{ SVGElement("feComposite") }}</li>
  <li>{{ SVGElement("feConvolveMatrix") }}</li>
  <li>{{ SVGElement("feDiffuseLighting") }}</li>
  <li>{{ SVGElement("feDisplacementMap") }}</li>
  <li>{{ SVGElement("feFlood") }}</li>
  <li>{{ SVGElement("feGaussianBlur") }}</li>
  <li>{{ SVGElement("feImage") }}</li>
  <li>{{ SVGElement("feMerge") }}</li>
  <li>{{ SVGElement("feMorphology") }}</li>
  <li>{{ SVGElement("feOffset") }}</li>
  <li>{{ SVGElement("feSpecularLighting") }}</li>
  <li>{{ SVGElement("feTile") }}</li>
  <li>{{ SVGElement("feTurbulence") }}</li>
  <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li>
</ul>
Revert to this revision