フィルタ効果(続き)

以下にご紹介するのは、利用可能なフィルタ効果です。適用可能な例がある場合は、追加してあります。実装上の問題や詳細については、SVG仕様をごらんください。

feBlend

例:

<feBlend result="Blend"  mode="screen"<
 in2="OffsetAlpha"  in="SourceGraphic" />

属性:
mode, 画像のブレンド・モードのひとつ。デフォルトは: normal.
in2, 合成処理の2つ目の画像。

このフィルタは、通常使用されるハイエンドな画像ソフトウェアのブレンド・モードで2つのオブジェクトを合成します。2つの入力画像の組み合わせをイメージ・スペースでピクセル単位で実行します。

feColorMatrix

例:

<feColorMatrix in="SourceGraphic" type="matrix"
 values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 "
 result="ColorMatrix"/>

属性:
type, 列 (次のうちのひとつ:matrix, saturate, hue-rotate, luminance-to-alpha)
values

feComponentTransfer

例:

<feComponentTransfer in="SourceAlpha" result="FilterExample"><feFuncR type="table" tableValues=".5 0"/>
<feFuncG type="table" tableValues=".5 0"/>
</feComponentTransfer>

属性:
なし

このフィルタは、輝度調整、コントラスト調整、カラーバランス、しきい値などの操作を可能にします。

feComposite

例:

<feComposite in="BluredAlpha" in2="SourceGraphic"
operator="out" result="CompBlurOut"/>

属性:
operator, 次のうちのひとつ (over, in, out, atop, xor, arithmetic)。 デフォルトは: over
arithmetic -- 定数, k1,k2,k3,k4
in2, 合成操作のための2番目の画像

arithmetic は、テクスチャー・データとともにfeDiffuseLightingとfeSpecularLightingフィルタの出力を組み合わせるのに便利です。arithmeticは、またディゾルブを実装するのにも便利です。

feDiffuseLighting

例:

<feDiffuseLighting in="SourceAlpha" resultScale="3" surfaceScale="20" diffuseConstant="1" lightColor="white"
 result="DiffuseLighting">
<feDistantLight azimuth="40" elevation="100"/>

属性:
resultScale (結果に対する倍率。これにより、feDiffuseLightingノードが1を越える値を示すことが可能になる。)
surfaceScale  Ain= 1の時、表面の高さ。
diffuseConstant  Phongライティング・モデルのkd。0.0から1.0の間。
lightColor RGB

このフィルタは、ライト・マップを作ります。これはarithmetic<Composite>合成手法のmultiply項を使ってテクスチャー・イメージと結びつけることができます。feDiffuseLightingノードに対する子として追加のライト・ノードを作成することによって、複数の光源をシミュレートすることができます。

feDisplacementMap

例:

<feTurbulence baseFrequency="0.08" numOctaves="3"
 result="turb"/>
<feDisplacementMap in="SourceGraphic" in2="turb" scale="10"
 xChannelSelector="R" yChannelSelector="G"/>

属性:
scale
xChannelSelector R、G、B、Aのいずれか
yChannelSelector R、G、B、Aのいずれか
in2, 対応するディスプレイスメントをその色値が決定するような画像。

チャンネル・セレクタは、2番目の画像のいずれのカラー・チャンネルが、最初の入力画像のピクセルをオフセットするのに使われるかを決定します。たとえば、xChannelSelectorがR、yChannelSelectorがG、2番目の入力画像がピクセル(4,4)のところで赤値15で緑値12である場合、フィルタ効果はソースのピクセル(4,4)をX軸に沿って15ユーザ指定単位、Y軸に沿って12ユーザ指定単位だけ移動します。

feFlood

例:

<feFlood style="flood-color:blue;
flood-opacity:.5" result="Flood"/>

属性:
style,  RGBAカラーを指定するために'flood-color'と'flood-opacity'プロパティ(いずれも継承不可)を指定する。

色で塗りつぶされた画像を無限に作成する。

feGaussianBlur

例:

<feGaussianBlur in="SourceAlpha" stdDeviation="4"
result="blur"/>

属性:
stdDeviation.

しばしば、この操作はアルファ・オンリーの画像で行われます。たとえば、SourceAlphaといった内蔵の入力によって作成された画像など。実装すると、これを指摘して単一のチャンネルのケースを最適化するかもしれません。入力が無限で定数の場合、この処理は何の結果も生みません。入力が無限でタイルの場合、このフィルタは周期的な境界とともに評価されます。

feImage

例:

<feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> 

属性:
xlink:href,  外部画像データを参照
transform,  補足的な変形仕様

xlink:hrefは、外部画像を参照するか、他のSVGを参照します。このノードは外部ソース以外の、内蔵の画像ソースSourceGraphicと似た画像を作成します。

feMerge

例:

<feMerge>
	<feMergeNode in="offsetBlurredAlpha"/>
	<feMergeNode in="litPaint"/>
</feMerge>

属性:
none.なし

多くの効果が、最終的な出力画像を作成するために多数の中間的レイヤーを生み出します。このフィルタは、それらを1つの画像にまとめることを可能にします。これはn-1個の feCompositeノードを使うことにより可能ですが、この形式で利用可能なこの共通操作のほうが便利です。

feMorphology

例:

<feMorphology result="DilateEx"  radius="1"
 operator="dilate"  in="SourceGraphic" />

例:

<feMorphology in="SourceGraphic" operator="erode"
 radius="1" result="ErodeEx"/>

属性:
operator, erodeかdilateのいずれか 
radius,  処理の程度

このフィルタは、Photoshopのmin/maxフィルタや、ImageStylerの幅レイヤー属性に似た効果があります。 "fattening" あるいは"thinning"アルファ・チャンネルの場合に便利です。

feOffset

例:

<feOffset result="OffsetSource" dx="10" dy="10"
 in="SourceGraphic" />

属性:
dx, dy.

指定した量だけ画像を画像スペース内での現在位置からオフセットする

feSpecularLighting

例:

<feSpecularLighting in="BlurAlpha" surfaceScale="5"
 specularConstant="1" specularExponent="10"
 lightColor="white" result="SpecularLightingExample">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>

属性:
surfaceScale Ain = 1の時の表面の高さ
specularConstant Phongライティング・モデルのks。0.0から1.0の間
specularExponent specular項のべき指数。値が大きいほどより"明るく(shiny)"なる。1.0と128.0の間。
lightColor RGB.

このフィルタは、ライティング計算の鏡像反射を含む画像を生み出します。このようなマップは、追加項であるarithmetic Composite手法を使ってテクスチャーと組み合わせることを想定しています。複数の光源は、feSpecularLightingノードの子として追加されたライト・ノードを作成することによってシミュレートすることができます。

feTile

例:

<feTile in="SourceGraphic" result="TileEx"/>

属性:
なし

画像スペースでソース画像を複製することによって無限に画像を作成する。

feTurbulence

例:

<feTurbulence type="turbulence" baseFrequency="0.05"
 numOctaves="2" result="TurbulenceExample"/>

属性:
baseFrequency
numOctaves
type, 1つのoffractalNoiseまたは乱流 

このフィルタは、雲や大理石のような複雑なテクスチャーを合成することを可能にします。

私たちのお気に入りのレシピをどうぞ:

クレージーな溶岩フィルタ

3Dスプラット・フィルタ

ソフトフォーカス・フィルタ

シルバー・アウトライン・フィルタ

その他のフィルタについてはデモンストレーションと実例 をごらんください。

次のレッスン:JPEG、GIF、PNG