Workship MAGAZINE書籍化第3弾!#ADHDフリーランス の新常識 他
- 隔週月曜更新!フリーランス・副業ニュース
SVGフィルタシリーズ第1回では、SVGフィルタの作り方・使い方などの基本的なことを学びました。
SVGフィルタシリーズ第2,3回では、<feMorphology>
についてご紹介します。第1回の内容がすこし登場するので、ぜひ第1回からお読みください。
【SVGフィルタ講座①】基本的な使い方&画像にぼかし効果を加える方法
Workship MAGAZINE
<feMorphology>
は、私のお気に入りのSVGフィルタ操作のひとつ。とても簡単にモーフィングできる、汎用性の高いフィルタ操作です。
「モーフィング」とは、オブジェクトの姿や形を変形することです。「モーフ(変形)する」ともいいます。
変形フィルターはオブジェクトにはたらきかけ、以下の2つの決められた形状変化をもたらします。
つまり、<feMorphology>
プリミティブを使うことで、要素を縮めたり大きくしたりできるのです。
技術的な点から見ると、これらの操作はどちらもピクセルレベルで実行されます。対象ピクセルの角に隣接するピクセルを崩したり(縮小)、対象ピクセルを隣接するピクセルに繋げて広げたり(膨張)することで、こうした形状変化が可能になります。ピクセルの「伸長」や「膨張」に使われる隣接するピクセルの数、およびピクセルを崩す量は、半径パラメータで決定されます。
<feMorphology
in=".." result=".."
operator="dilate || erode" radius="">
</feMorphology>
半径パラメータは、円や長円の半径として考えられます。この半径により決定された円の中にあるすべての隣接するピクセルが影響範囲となり、縮小・膨張効果を作り出すのに使われます。
実際には、半径は構造化要素であるカーネルサイズを定義しており、構造化要素は行列のような見た目をしています。最初のうちは、構造化要素とは「幅と高さがradius属性で指定されたピクセルで決定される、小さな長方形」であると理解すれば十分です。
このフィルタを使うのに、ピクセルレベルでどう変形が行われるかを専門家のように細かく理解する必要はありません。要素の縮小・膨張の量を決定する<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
からdilate
に変えるとどうなるでしょうか。
似たような2つの効果ですが、特徴的な違いがあります。
どちらの場合においても、画像は抽象画のように変化します。またピクセルが縮小・膨張するのに合わせて画像サイズも変化します。
これらの結果としてわかりやすいのは「色の違い」でしょう。erode
はより暗い色のピクセルを含む画像を生成し、dilate
はより明るい色を生成します。この理由は以下のとおりです。
erode
(デフォルト値)はR / G / B / Aそれぞれのチャネルにおいて、対象ピクセルの「最も暗い色」or「最も透明度の高い色」を隣接するピクセルにセットするdilate
はそれぞれのチャネルにおいて、対象ピクセルに隣接するピクセルの「最も明るい色」or「最も透明度の低い色」が対象ピクセルにセットされるしかし、こうした技術面は抜きにして考えても大丈夫です。大切なのは、<feMorphology>
を画像に適用するとほぼ毎回同じ結果が得られるということです。
ただしテキストのような単一色の要素に<feMorphology>
を適用すると、要素は縮小または膨張しかしません。一色しか使われていないばあいは、ピクセルの色変化は発生しないためです。
今回は<feMorphology>
を使って、画像のピクセルを変形させる方法をご紹介しました
次回は同じ<feMorphology>
を使って、テキストを縁取りする方法を解説します。
(原文:Sara Soueidan 翻訳:Yui Tamura 編集:Workship MAGAZINE編集部)