mozilla

Revision 502225 of feConvolveMatrix

  • Revision slug: Web/SVG/Element/feConvolveMatrix
  • Revision title: feConvolveMatrix
  • Revision id: 502225
  • Created:
  • Creator: kscarfone
  • Is current revision? Yes
  • Comment Added SVG tags and {{SVGRef}} call

Revision Content

{{ SVGRefElem() }}

the feConvolveMatrix element applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.

Usage context

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

Example

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("in") }}
  • {{ SVGAttr("order") }}
  • {{ SVGAttr("kernelMatrix") }}
  • {{ SVGAttr("divisor") }}
  • {{ SVGAttr("bias") }}
  • {{ SVGAttr("targetX") }}
  • {{ SVGAttr("targetY") }}
  • {{ SVGAttr("edgeMode") }}
  • {{ SVGAttr("kernelUnitLength") }}
  • {{ SVGAttr("preserveAlpha") }}

DOM Interface

This element implements the SVGFEConvolveMatrixElement interface.

See also

  • {{ SVGElement("filter") }}
  • {{ SVGElement("animate") }}
  • {{ SVGElement("set") }}
  • {{ SVGElement("feBlend") }}
  • {{ SVGElement("feColorMatrix") }}
  • {{ SVGElement("feComponentTransfer") }}
  • {{ SVGElement("feComposite") }}
  • {{ 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

{{SVGRef}}

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>the <code>feConvolveMatrix</code> element applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categories</th>
   <td>Filter primitive element</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>Any number of the following elements, in any order:<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#feConvolveMatrixElement" title="http://www.w3.org/TR/SVG/filters.html#feConvolveMatrixElement">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#Filter" title="en/SVG/Attribute#Filter">Filter primitive attributes</a>&nbsp;»</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
</ul>
<h3 id="Specific_attributes">Specific attributes</h3>
<ul>
 <li>{{ SVGAttr("in") }}</li>
 <li>{{ SVGAttr("order") }}</li>
 <li>{{ SVGAttr("kernelMatrix") }}</li>
 <li>{{ SVGAttr("divisor") }}</li>
 <li>{{ SVGAttr("bias") }}</li>
 <li>{{ SVGAttr("targetX") }}</li>
 <li>{{ SVGAttr("targetY") }}</li>
 <li>{{ SVGAttr("edgeMode") }}</li>
 <li>{{ SVGAttr("kernelUnitLength") }}</li>
 <li>{{ SVGAttr("preserveAlpha") }}</li>
</ul>
<h2 id="DOM.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGFEConvolveMatrixElement" title="en/DOM/SVGFEConvolveMatrixElement">SVGFEConvolveMatrixElement</a></code> interface.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{ SVGElement("filter") }}</li>
 <li>{{ SVGElement("animate") }}</li>
 <li>{{ SVGElement("set") }}</li>
 <li>{{ SVGElement("feBlend") }}</li>
 <li>{{ SVGElement("feColorMatrix") }}</li>
 <li>{{ SVGElement("feComponentTransfer") }}</li>
 <li>{{ SVGElement("feComposite") }}</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>
<p>{{SVGRef}}</p>
Revert to this revision