SVGのフィルター効果

フィルター要素の種類

SVGに用意されているフィルター要素は、ぜんぶで25個！
けど、中にはふたつでひとつみたいな要素もあるので、フィルターの種類的にはだいたい17種類くらい。
大きく、以下の4つのタイプに分けられるかなと思います:)。

重なりを制御するフィルター

• <feMerge/>（<feMergeNode/>）
  レイヤーを順に重ねる
• <feComposite/>
  重なるレイヤーの合成方法を指定する
• <feBlend/>
  重なるレイヤーの色の混ざり方を指定する
• <feDisplacementMap/>
  明暗によって、重なっている部分の画素をずらす

画像を追加するフィルター

• <feFlood/>
  塗りつぶした矩形を配置する
• <feImage/>
  画像を読み込み配置する
• <feTile/>
  画像の任意の範囲をタイル化する

状態を操作するフィルター

• <feColorMatrix/>
  要素の色をRGBチャンネルごとに調整する
• <feComponentTransfer/>（<feFuncR/>, <feFuncB/>, <feFuncG/>, <feFuncA/>）
  要素の明るさ、コントラスト、カラーバランス、しきい値を調整する
• <feConvolveMatrix/>
  エンボス、エッジ検出、ぼかし、シャープネスなどを調整する
• <feOffset/>
  要素の位置をずらす
• <feGaussianBlur/>
  要素をぼかす
• <feDropShadow/>
  要素の不透明部分に影を落とす
• <feMorphology/>
  画素を侵食（暗い画素を広げる）・膨張（明るい画素を広げる）させる
• <feTurbulence/>
  ノイズ、揺らぎによるごく自然な紋様を生成する（パーリンノイズによる描画）

照明効果フィルター

• <feDiffuseLighting/>（<fePointLight/>, <feDistantLight/>, <feSpotLight/>）
  照明効果をシミュレートする（不透明な箇所が盛り上がっているものとして扱う）
• <feSpecularLighting/>（<fePointLight/>, <feDistantLight/>, <feSpotLight/>）
  鏡面反射効果をシミュレートする（透明な箇所が盛り上がっているものとして扱う）

「状態を操作する」のと「照明効果」が、実際にフィルター効果を適用する要素で、「重なりを制御する」のと「画像を追加する」のは、フィルター効果を補助する役割、という印象です。
これらのフィルター要素を使って、Photoshopのフィルターとかレイヤー効果とか色調補正みたいな効果を、ブラウザ上で再現することができます:)。

フィルター効果を定義する

HTML内の適当な場所にsvg要素を用意します（ここでは</body>の直前あたりに書いています）。svg要素の中にdefs要素を用意して、この中にフィルター効果を定義してゆきます。
SVGでは、symbol要素やfilter要素など、後で再利用するべく書いた定義する要素はdefs要素の中に書く事になってるんです。
今回は、中身がフィルターの定義だけなので、width属性とheight属性の値を0に指定しておきます。

	︙
	<svg width="0" height="0"><defs>
		<!-- ここに定義を書く -->
	</defs></svg>
</body>

この中にfilter要素を書いて、前述のフィルター要素（feで始まる要素）を書いていくことで、自分だけのフィルター効果を定義します。フィルターの名前は、filter要素のid属性で指定します。

まずひとつ、カンタンンなフィルターを作ってみましょう。例えば、feGaussianBlur要素を使って以下のように書けば、「ぼかしフィルター」の出来上がり。ここでは分かりやすく、フィルター要素と同じfeGaussianBlurという名前を付けました。

<svg width="0" height="0"><defs>
	<filter id="feGaussianBlur">
		<feGaussianBlur stdDeviation="8 0"/>
	</filter>
</defs></svg>

フィルターを適用する

フィルターを適用するには、CSSのfilterプロパティを使います。値にはurl()関数を使って、括弧の中に、さっき作ったぼかしフィルターの名前の頭に#を付けて指定します。
フィルターを適用する要素にはfe-blurというclass名を付けています。

.fe-blur {
	filter: url(#feGaussianBlur);
}

<figure class="fe-blur">
	<img src="pan.svg" alt="">
</figure>

フィルターが適用されて、パンちゃんがブレました！ CSSでは一方向だけのぼかし（ブレ）はできないから助かりますねーX)。

けれど画像の下に、なにやら妙な余白がありますね（スクロールバーが出ちゃう）。これは、フィルターを定義しているsvg要素分の領域が影響してるみたいです。フィルターを定義しているだけなので隠しておきたいところ…:(。
表示されないように、display:noneしておくことにします！

<svg width="0" height="0" style="display:none"><defs>
	<filter id="feGaussianBlur">
		︙

余白がなくなりました。…けど、Chromeだとパンちゃんちょっと濃くなった…？
それにFirefoxではフィルターが外れちゃってます…。Firefoxでは、フィルターを定義しているsvg要素をdisplay:noneすると、フィルターの定義ごと消えちゃうみたいです…X(（2023.4現在）。

display:noneじゃない方法でsvg要素だけ表示されないように、svg-filterというclass名を付けて、以下のように念入りにスタイルを指定しておくことにします。
width/heightもスタイルで指定することにして、width/height属性は消しちゃいます。

<svg class="svg-filter"><defs>
	<filter id="feGaussianBlur">
		︙

.svg-filter {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	visibility: hidden;
}

妙な余白がなくなったまま、Firefoxでもパンちゃんがブレましたね;D！

色の分解

画像の色をRGBチャンネル（三原色）に分解するには、feColorMatrix要素を使います。
feColorMatrix要素は「要素の色をRGBチャンネルごとに調整する」ことができるフィルター要素で、やってる事はけっこう難しいのに、割とカンタンに、画像のRGBを調整できてしまうスゴ要素です:D！

フィルター要素の1行めでまさに、feColorMatrix要素を使って、「Gチャンネル（緑）の色味」だけが出力されるよう、調整しています。

<feColorMatrix type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0"/>

feColorMatrix要素では、values属性に指定した値に基づいて色を変化させるのですが、なにやら数字がいっぱい並んでいて難しそうですね…。
この数字の羅列は、変換行列といって、次元とか空間を数学的に表現するときに使われる、とっても難しい、数字や記号を矩形状に並べた、行と列のこと…:‹。
下図のように、5列×4行に並べ替えて見るとわかり良いです。RGBそれぞれに、5つの値でもって調整されるんですね:o。

各行の数値は左から、赤成分（r）、緑成分（g）、青成分（b）、透明度（a）と、全部の一括加算値（w）を表していて、下サンプルのように、Rr（赤色の赤成分）、Gg（緑色の緑成分）、Bb（青色の青成分）、Aa（透明度のアルファ成分）が1の時が通常で、「元と同じ色」が適用された状態（変化なし）ということになります:o。
なんとなく数値をいじってみると、行列と色の関係性が把握できるはずです。

<feColorMatrix type="matrix"
values="
	0 0 0 0 0 
	0 1 0 0 0 
	0 0 0 0 0 
	0 0 0 1 0
"/>

1行めでは、赤色と青色の行が全部0になっているので、緑色の緑成分だけ、つまりRGBのGだけの色が適用されたってわけですねーX)。

2行めは、feOffset要素を使って、緑になった画像をズラしています（上のサンプルよりもちょっと多めにズラしてます）。
dx属性に-8pxと、dy属性に-8pxを指定することで、左上にズレることになります。
そしてresult属性^※で、ここまでの状態をgという名前で「保存する」ということをしています。※result属性について詳しくは後述します。

<feOffset dx="-8" dy="-8" result="g"/>

この段階で、適用した要素を見てみると、下サンプルのような状態になります。見事に緑だけですね:D！

• <feColorMatrix> - SVG: スケーラブルベクターグラフィック | MDN
• <feOffset> - SVG: Scalable Vector Graphics | MDN

違う色も作る

3〜6行めでは、同じように「赤だけ」と「青だけ」を作っています。よく見ると、values属性の値と、feOffset要素でのズラし方が違うだけで、ほとんど1〜2行めと同じことをしていますよね:D！
それぞれ、青だけにした時は右方向へズラして、赤だけにした時は下方向へズラしています。

<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
<feOffset dx="4" dy="0" result="b"/>
<feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feOffset dx="0" dy="4"/>

feColorMatrix要素には、新たにin属性^※が増えてて、SourceGraphicという値を指定することで、フィルター要素を適用する対象を指定し直しています。それから、result属性^※で、さっきはgだったけど今度はbという名前で「保存」しています。※in属性とresult属性について詳しくは後述します。
6行めまで書いた段階で、適用した要素を見てみると、下サンプルのような状態になります。赤いですね！

「あれ？緑と青は何処行った？」と思うかもしれないけれど、ひとまずじゃんじゃか次の行を見てゆきますね:)！

作った色を重ねる

残りの7〜8行めでは、feComposite要素を使って、緑だけの画像と青だけの画像を重ねています。
feComposite要素は、重なった部分の合成方法を指定できるフィルター要素で、ここでは、その方法にlighterという値を使っています。

<feComposite in="g" operator="lighter"/>
<feComposite in="b" operator="lighter"/>

「あれ？緑と青は何処から持ってきた？」と思うかもしれないけれど、その秘密はin属性にあります。※in属性についても詳しくは後述します！