<feConvolveMatrix>
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
<feConvolveMatrix> は SVG のフィルタープリミティブで、行列畳み込みフィルター効果を適用します。畳み込みとは、入力画像のピクセルと隣接するピクセルを組み合わせて、結果の画像を生成する処理です。畳み込みを利用することで、ぼかし、エッジ検出、シャープ化、エンボス加工、ベベル加工など、さまざまな画像操作を実現できます。
行列畳み込みは、n × m の行列（畳み込みカーネル）に基づいており、入力画像内の指定されたピクセル値が、その近傍のピクセル値とどのように組み合わされて結果のピクセル値が生成されるかを記述するものです。各結果ピクセルは、対応するソースピクセルとその近傍のピクセルにカーネル行列を適用することで決定されます。指定されたピクセルそれぞれの色値に適用される基本的な畳み込みの式は、次のとおりです。
ここで、"orderX" および "orderY" は、order 属性の X および Y 値を表し、それ以外にも targetX、 targetY、kernelMatrix、 divisor、および bias 属性を指します。
以上の上の式において、多くのコンピュータグラフィックの教科書で説明されている畳み込みの理論と一致させるため、カーネル行列の値は、ソース画像および出力先画像に対してカーネル行列が 180 度回転させた状態で適用されることに注意してください。
例を挙げると、5 ピクセル× 5 ピクセルというサイズの入力画像があり、そのうちのある色チャンネルの色値が以下の通りであるとします。
0 20 40 235 235 100 120 140 235 235 200 220 240 235 235 225 225 255 255 255 225 225 255 255 255
そして、3 × 3 の畳み込みカーネルを次のように定義します。
1 2 3 4 5 6 7 8 9
画像の 2 行目 2 列目の色値に注目してみましょう（ソースピクセルの値は 120 です）。最も単純な場合（入力画像のピクセルグリッドがカーネルのピクセルグリッドと完全に一致している場合）を仮定し、属性 divisor、targetX、targetY についてデフォルト値を使用すると、結果として得られる色値は次のようになります。
(9*0 + 8*20 + 7*40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
他のフィルタープリミティブと同様に、デフォルトで linearRGB 色空間 の色成分を処理します。color-interpolation-filters を使用することで、代わりに sRGB を使用することもできます。
使用コンテキスト
属性
DOM インターフェイス
この要素は SVGFEConvolveMatrixElement インターフェイスを実装しています。
例
SVG
<svg
width="200"
height="200"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="emboss">
<feConvolveMatrix
kernelMatrix="3 0 0
0 0 0
0 0 -3" />
</filter>
</defs>
<image
href="mdn.svg"
x="0"
y="0"
height="200"
width="200"
filter="url(#emboss)" />
</svg>
結果
仕様書
| 仕様書 |
|---|
| Filter Effects Module Level 1 # feConvolveMatrixElement |