【SVGフィルタ講座②】feMorphologyを使って、画像のピクセルを変形する

SVGフィルタシリーズ第1回では、SVGフィルタの作り方・使い方などの基本的なことを学びました。

SVGフィルタシリーズ第2,3回では、<feMorphology>についてご紹介します。第1回の内容がすこし登場するので、ぜひ第1回からお読みください。

<feMorphology>は、私のお気に入りのSVGフィルタ操作のひとつ。とても簡単にモーフィングできる、汎用性の高いフィルタ操作です。

<feMorphology>を使ってオブジェクトをモーフィングしよう

「モーフィング」とは、オブジェクトの姿や形を変形することです。「モーフ（変形）する」ともいいます。

変形フィルターはオブジェクトにはたらきかけ、以下の2つの決められた形状変化をもたらします。

• 縮小：幅を細くする、縮めるなど
• 膨張：幅を太くする、大きくするなど

つまり、<feMorphology>プリミティブを使うことで、要素を縮めたり大きくしたりできるのです。

技術的な点から見ると、これらの操作はどちらもピクセルレベルで実行されます。対象ピクセルの角に隣接するピクセルを崩したり（縮小）、対象ピクセルを隣接するピクセルに繋げて広げたり（膨張）することで、こうした形状変化が可能になります。ピクセルの「伸長」や「膨張」に使われる隣接するピクセルの数、およびピクセルを崩す量は、半径パラメータで決定されます。

<feMorphology

in=".." result=".."

operator="dilate || erode" radius="">

</feMorphology>

半径パラメータは、円や長円の半径として考えられます。この半径により決定された円の中にあるすべての隣接するピクセルが影響範囲となり、縮小・膨張効果を作り出すのに使われます。

実際には、半径は構造化要素であるカーネルサイズを定義しており、構造化要素は行列のような見た目をしています。最初のうちは、構造化要素とは「幅と高さがradius属性で指定されたピクセルで決定される、小さな長方形」であると理解すれば十分です。

▲3×3構造化要素（カーネル）を使った縮小効果

このフィルタを使うのに、ピクセルレベルでどう変形が行われるかを専門家のように細かく理解する必要はありません。要素の縮小・膨張の量を決定する<feMorphology>に、1,2個の半径値を設定する必要がある、という点が理解できれば十分です。radius属性に2つの番号を与えると、ひとつめはXの半径を、ふたつめはYの半径に決定されます。

画像のピクセルを変形させる

<feMorphology>操作を画像に適用する場合、通常は予測可能なふたつの結果が得られます。

• erodeオペレータを使うと画像のサイズ（寸法）が小さくなり、dilateオペレータを使うと大きくなる
• erodeおよびdilateいずれかのオペレータを使うと、大きなブラシで描いたような大雑把な見た目になる

では、画像に変形効果を適用するばあいのサンプルコードを見ていきましょう。

<svg width="450" height="300" viewBox="0 0 450 300">

<filter id="erode">

<feMorphology operator="erode" radius="3"></feMorphology>

</filter>

<image xlink:href="..." width="90%" height="90%" x="10" y="10" filter="url(#erode)"></image>

</svg>

このスニペットでは、画像のピクセル数を3ピクセル分縮小しています。

以下の画像はコードの結果を示したものです。右の画像の方がわずかにサイズが小さく、大雑把な画像になりました。

▲左の画像にerode（縮小変形）操作を行なった結果　→　右の画像

次に、変形半径は同じままでオペレータをerodeからdilateに変えるとどうなるでしょうか。

似たような2つの効果ですが、特徴的な違いがあります。

▲左の画像にdilate（膨張変形）操作を行った結果　→　右の画像

どちらの場合においても、画像は抽象画のように変化します。またピクセルが縮小・膨張するのに合わせて画像サイズも変化します。

これらの結果としてわかりやすいのは「色の違い」でしょう。erodeはより暗い色のピクセルを含む画像を生成し、dilateはより明るい色を生成します。この理由は以下のとおりです。

• erode（デフォルト値）はR / G / B / Aそれぞれのチャネルにおいて、対象ピクセルの「最も暗い色」or「最も透明度の高い色」を隣接するピクセルにセットする
• dilateはそれぞれのチャネルにおいて、対象ピクセルに隣接するピクセルの「最も明るい色」or「最も透明度の低い色」が対象ピクセルにセットされる

しかし、こうした技術面は抜きにして考えても大丈夫です。大切なのは、<feMorphology>を画像に適用するとほぼ毎回同じ結果が得られるということです。

ただしテキストのような単一色の要素に<feMorphology>を適用すると、要素は縮小または膨張しかしません。一色しか使われていないばあいは、ピクセルの色変化は発生しないためです。

まとめ

今回は<feMorphology>を使って、画像のピクセルを変形させる方法をご紹介しました

次回は同じ<feMorphology>を使って、テキストを縁取りする方法を解説します。

（原文：Sara Soueidan　翻訳：Yui Tamura　編集：Workship MAGAZINE編集部）