フィルター効果を用いることでそのままでは印象の薄い平面図形に様々な表情を持たせることができる．本項ではこのフィルター効果について説明する．SVGの持つ機能の中でも特に仕様が複雑なものの一つである．

filter:画像効果

filter要素は図形に対しての視覚効果を表す．元の画像・図形を維持しつつ，見た目の変更・装飾を行えるため非常に魅力的な機能である．一般に画像はその構成する画素毎にrgb値と不透明度（alpha）値とを定めるが，filterはこの色に関わる4つの値を画素毎に編集するだけである．従ってサイズを変えたり回転させるといった画像の変形を伴う操作については原則transform属性を用いねばならない．なお，filterによる画像効果は暗黙的なラスタライズを引き起こし，本質的に重いため掛け過ぎてはならない．特にフィルターを掛ける領域が広くなるほど負荷が高くなる．

filter

画像効果をかける．図形要素及びコンテナ要素に指定可能．

url(#[参照先])

フィルタ要素への参照先

none

フィルター無し

filter機能はsvgの仕様の中でもかなり巨大なものであり，ブラウザごとの実装状況に大きな隔たりが存在する．基本的な機能は概ね問題ないものの，いざ複雑な効果を得ようとした際に，環境によって見た目や動作が異なるばかりか一切動かないと言ったことも有りうる．従って，できる限り構造を簡潔にしたり十分な検証を行う必要がある．

原始フィルターとフィルターの構成

feから始まる要素群を原始フィルターと呼ぶ．原始フィルターは基本的な画像操作で，これを手続き的（関数的）に組み合わせることで目的のフィルター操作を定義する．原始フィルターは上から順に実行され，in属性に設定された画像にフィルターを掛け，result属性に設定した名称で保持する．この画像を改めて他の原始フィルターのinに設定することで画像効果を重ねることが出来る．この処理を繰り返し，最後に実行された原始フィルターの結果がスクリーンに描画される．要はin（in2）を入力とし，resultを出力としたパイプ処理である．

例を示す．元画像に原始フィルターを適用して最終的にドロップシャドウ画像を生成している．

もうひとつ例を示す．これはラテアートをイメージした効果を与えるもので，原始フィルターの組み合わせによっては非常に面白い効果が得られる．

フィルター処理における属性の意味

filter要素のもつ属性は次の通り．

x,y,width,height

filter要素による図形の描画範囲を定義する．未設定の場合はフィルター対象の描画範囲＋10%（上下左右）．

filterUnits

x,y,width,heightを施す座標系の指定．

userSpaceOnUse

要素の配置に対する座標系

objectBoundingBox

要素内部の相対比率（既定値）

primitiveUnits

原始フィルターの用いる座標系．

userSpaceOnUse

要素の配置に対する座標系（既定値）

objectBoundingBox

要素内部の相対比率

filterRes

フィルターを施す際の作業領域の画素数．

フィルターの有効範囲

filter要素のx，y，width，height属性はフィルターを施す際のグラフィックの参照範囲及び出力領域を表す．この範囲外への描画は無視されてしまう．フィルターの処理結果が欠けてしまう等の問題が発生する場合，これらの値が適切かどうか確認しよう．

なおこれらの値はfilterUnits属性の設定内容により意味合いが変化する．

解像度の設定

filterRes属性はフィルターを施す際の解像度を表す．小さいと画質が悪く，大きいと処理が重くなる．フィルターが施された要素はこの解像度の影響を受けるため，画像拡大時にラスタ形式の画像と同様の品質の低下が発生する．なお意図的に値を小さく設定すると画像にモザイク的な効果を施すことも出来る（ブラウザによって結果が異なる点に注意）．この値を指定するとベクタ形式が本来持っている解像度に依存しないと言ったメリットを打ち消すため，使い所をよく考える必要がある．

フィルターの継承

既に有るfilter要素の設定値をxlink:hrefを使うと流用することができる．流用可能な値は属性値及び原始フィルターの構成である．が，既存のフィルターにフィルターを追加すると言ったことは出来ない．

xlink:href

フィルターの参照先

原始フィルターの属性

原始フィルターには様々な種類があるが，次の属性は共通して定義されている．

x,y,width,height

フィルターを施す範囲．

in

フィルターの入力画像．未設定の場合は直前の処理結果が設定される．先頭の場合は元画像が設定される．

SourceGraphic

元画像のグラフィック情報（既定値）

SourceAlpha

元画像の不透明度情報を黒の不透明度で取得する．要するに影．

BackgroundImage

背景要素のグラフィック情報．（自分自身ではない）→enable-backgroundが適切に設定されていないと動作しない．

BackgroundAlpha

背景の透過情報．（自分自身ではない）

FillPaint

フィルター要素のfill内容で埋め尽くしたもの（operaでのみ動作）．使っているグラデーションや，パターンを抽出する．

StrokePaint

フィルター要素のstroke内容で埋め尽くしたもの（operaでのみ動作）．使っているグラデーションや，パターンを抽出する．

result

フィルターを施した結果．この値を別の原始フィルターのin属性に設定することでフィルタの重ねがけを表現する．

enable-background

コンテナ要素において背景画像へのアクセスを有効とするか．

accumulate

無効

new

有効

[x,y,width,height]

範囲有効

color-interpolation-filters

画像合成の際の色空間を与える．

auto

自動

sRGB

sRGB

linearRGB

linearRGB

グラフィックの取得

in属性に与える値には元画像を構成するグラフィックを表すキーワード他の原始フィルターの処理結果（result属性のキーワード）の何れかを指定する．in属性未設定の場合は直前の原始フィルターの処理結果が，先頭の原始フィルターの場合はSourceGraphicが与えられたものとして扱われる．

SourceGraphicが元の画像を表すのに対し，SourceAlphaは元画像の不透明度を黒色で取得する．要は影である．

fill属性，stroke属性で利用しているグラフィックを取り出すこともできる．現状operaのみ対応．将来的にfirefoxにおいても利用可能．

図形の描画範囲の背景画像を取得することもできる．presto operaのみ対応．なお，背景画像との合成を行う場合はSVG2で導入されたmix-blend-modeプロパティを使ったほうがよい．

原始フィルターの有効範囲

x,y,width,height属性は原始フィルターが処理対象とする処理範囲（原始フィルタ部分領域）を表す．参照した画像はこの範囲で切りだされ，この範囲に出力される．なお原始フィルターが参照する座標・長さは親となるfilter要素のprimitiveUnits属性により意味合いが変化する．

g要素による画像処理の制御

図形要素にfilter属性とtransform属性の両方が定義されていた場合，transform属性で変換された座標軸を基準にfilterが掛けられる（＝filter処理の後で図形の変形が行われる）．元の座標軸を基準にfilter処理を施したい場合は図形要素を一旦g要素で囲み，このg要素に対してfilter属性を設定すると良い．

同様にg要素を用いてフィルターを重ねることも可能だ．これは原始フィルターを組み合わせたフィルターを更に組み合わせる場合に重宝する．

基本フィルター

以下原始フィルター要素の種類を示す．ブラウザにより対応状況や効果の程度等が異なるので，見た目の確認が必要である．なおここで示すフィルターは原始フィルターの中でもBasicFilterと呼ばれているもので，比較的単純に用いることができる．

feBlend：画像のブレンド

画像の合成法を選択できる．概ねmultiplyでは暗く，screenでは明るくなる．

in,in2

合成したい画像

mode

画像の合成法

normal

通常

multiply

乗算

screen

スクリーン合成

darken

比較暗

lighten

比較明

Compositing and Blending Level 1による拡張

SVG2では上記のmodeの他，Compositing and Blending Level 1によるブレンドモードがサポートされる．

mode

画像の合成法(ブレンドモード)

normal

通常

multiply

乗算

screen

スクリーン合成

ovarlay

オーバーレイ合成

darken

比較暗

lighten

比較明

color-dodge

覆い焼き

color-burn

焼きこみ

hard-light

ハードライト

soft-light

ソフトライト

difference

差の絶対値

exclusion

除外

hue

色相

saturation

彩度

color

カラー

luminosity

輝度

feColorMatrix：色の行列変換

三原色＋透過度の4要素を5×4行列によって行う変換．色味を交換したり，色を透明度に変換したりする．type=matrixの場合の色演算を行列で表すと次の通り．（MathMLで記述しています．）

このままだと使いにくいが，よく使いそうなものについては予め定義されている．

type

演算の種類．

matrix

行列演算

saturate

彩度変換（sはvaluesで与えた値）
r' = (0.213+0.787*s)*r + (0.715-0.715*s)*g + (0.072-0.072*s)*b
g' = (0.213-0.213*s)*r + (0.715-0.285*s)*g + (0.072-0.072*s)*b
b' = (0.213+0.213*s)*r + (0.715-0.715*s)*g + (0.072-0.928*s)*b

hueRotate

色相回転（degはvaluesで与えた値）値の次の行列計算により行われる．

a00 a01 a02
a10 a11 a12
a20 a21 a22

=
 

0.213 0.715 0.072
0.213 0.715 0.072
0.213 0.715 0.072

+ cos(deg) *
 

+0.787 -0.715 -0.072
-0.213 +0.285 -0.072
-0.213 -0.715 +0.928

+ sin(deg) *
 

-0.213 -0.715 +0.928
+0.143 +0.140 -0.283
-0.787 +0.715 +0.072

luminanceToAlpha

明度抽出．不透明度として取得する．
a' = 0.2125*r + 0.7154*g + 0.0721*b

values

typeにより意味合いが変化する．matrix→行列値（a01,a02・・・a33,a34の順で指定する），saturate→割合（0〜1），hueRotate→角度（0〜360）

feComponentTransfer,feFuncR,feFuncG,feFuncB,feFuncA：色の変換

R，G，B，不透明度毎に色味の変換関数を指定する．減色（discrete）,ネガポジ変換（linear）,色調補正（gamma），切り抜きなどに用いる.

type

変換の方法

identity

恒等変換

table

折れ線

discrete

階段

linear

線形

gamma

ガンマ補正

tableValues

table,discreteの際に指定．重みの値を列挙する．

slope

linearの際に指定．一次関数の傾き．

intercept

linearの際に指定．一次関数の切片

amplitude

gammaの際に指定．ガンマ増幅率．計算式：amplitude*x^exponent+offset

exponent

gammaの際に指定．ガンマ補正指数．

offset

gammaの際に指定．オフセット．

feComposite：PORTERDUFF合成

画像をくり貫きたい場合に便利．詳しくはこちらを参照．不透明度が1の部分をベースに考えると判りやすい．

in,in2

合成したい画像．

operator

合成の方法．

over

inの画像を優先．

in

inとin2の共通部分．

out

in2の部分をくり抜く．

atop

in2の領域にinの画像を重ねる．

xor

共通部をくり抜く．

arithmetic

2つの画像の共通部分に応じた合成演算を行う．

k1,k2,k3,k4

arithmeticの際に用いる．計算式k1*i1*i2 + k2*i1 + k3*i2 + k4として表され，それぞれin∩in2,in∩¬in2,¬in∩in2,¬in∩¬in2の4領域の重み付けに相当．

feFlood：単色による塗りつぶし

フィルタ範囲を指定の色で塗りつぶす．単体で用いることは無いかもしれない．x,y,width,height属性を指定し矩形範囲の塗りつぶすことができる．

flood-color

塗りつぶしの色

flood-opacity

塗りつぶしの透明度

feGaussianBlur：ガウスぼかし

画像をぼかす．コンボリューションフィルタによるぼかしよりも高速．SourceAlphaから図形の影を作るのは常套手段．x軸とy軸の別々にぼかす幅を指定することができる．

stdDeviation

ぼかし幅（x軸方向 y軸方向）

feImage：画像の挿入

外部の画像を読み込む．

xlink:href

参照する画像．画像の位置かuseで参照できる要素のID．firefoxではIDの参照が動作しない．標準仕様と異なる動作なのでバグだと思われる．

preserveAspectRatio

アスペクト比の保存方法→image要素と同じ．

feMerge，feMergeNode：画像の重ね合わせ

feMergeNodeに設定した画像を順に重ねていく．

feOffset：画像ずらし

元の画像を指定した分ずらした画像を得る．

dx,dy

ずらす量

feTile：画像の敷き詰め

feImageで読み込んだ画像をタイル状に並べる等の用途に使う．

拡張フィルター

以下は先ほどの基本フィルターに含まれないものである．フィルターの中でも動作が複雑なものが多く，工夫次第で様々な効果を得ることができる．

feConvolveMatrix：行列コンボリューションフィルタ効果

日本語では行列による畳み込みと呼ばれる．画素を中心としたマトリクス領域を元に中心画素の色を算出する．エンボス，輪郭抽出，ぼかし，シャープネス等の処理が可能．具体的なアルゴリズムについてはこちらを参照のこと．概ね他のグラフィックツールの考えと同じなので，色々と調べてみるとよい．なお上手く行かないときはpreserveAlphaの値がtrueとなっているか確認しよう．

例）輪郭抽出order="3 3" kernelMatrix="1 1 1 1 -8 1 1 1 1" divisor="8" preserveAlpha="true"

order

行列サイズ（例3 3）

targetX,targetY

処理対象画素の行列内での位置．(例「1-1」であれば3×3行列の中心を表す．)

edgeMode

縁の画素を計算する際，はみ出した領域の色の扱い．duplicate（繰り返し） | wrap（対辺） | none（無色）

kernelMatrix

orderで設定した行列のセルごとの重み付け．但し，180度ひっくり返った形で適用される．要するに後ろの値から左上の画素に掛け合わされる．

divisor

kernelMatrixで重み付けした後の分母値．未設定時はkernelMatrixの総和（0の場合は1）となる（→重み付け平均値になる）．

bias

計算結果に加えられる値（0〜1）．

preserveAlpha

不透明度を維持するか．true|false

feDisplacementMap：空間変異

元画像を変形し様々な効果を得る．transformのような均一な変形と異なり歪み等を表現できる．こちらも参照．
変形は次の計算式によって行われる．Pは元画像の座標を，P'は変換後の画像の座標を表す．XC，YCはin2の指定した座標の色を表す．（なお，色については不透明度（0〜1）を掛けた値となる）
P'(x,y) <- P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
要はin2の暗い/明るいところは画像がズレると憶えておけば良い．この機能は高機能だが，使いこなすには難しいかもしれない．

in

効果をかける画像

in2

効果を表す画像

xChannelSelector

in2のどの色要素をx軸方向の変換に用いるか．規定は不透明度

yChannelSelector

in2のどの色要素をy軸方向の変換に用いるか．規定は不透明度

scale

ずらす幅

feTurbulanceと合わせると自然な揺らぎなどが得られる．x方向，y方向の何れかの方向のみにずらしたい場合はfeComponentTransferと組み合わせると良い．

ブラウザ間のcolor-interpolation-filters属性の解釈の差異によって微妙に変形の度合いが異なるケースがあるので，見た目に大きな隔たりが出た場合はこの値を疑ってみよう．

in2に指定する画像を用意する場合，スクリプトの利用を許すのであればcanvas要素でラスタ画像を動的に生成した後，得られたdataスキーム形式の文字列をfeImage要素に渡す方法もある．変形前と変形後とでピクセル毎にどのくらいずらすかをきちんと設計する必要があるため，それほど容易ではない．（素直にcanvas要素を使えばいい話だが，どうしてもfilterを使いたい場合に有効．）

feMorphology：画像の侵食，膨張

周辺画素の明るさを元に中心の色を決定する．応用次第で筆で描いたような効果を得ることも可能だ．斜め方向の効果が大きくなりやすく，これが気になる場合はfilterRes属性を若干大きめに取ると改善される場合がある．

operator

処理の切り替え

erode

侵食…暗い/値の小さい所が広がる

dilate

膨張…明るい/値の大きい所が広がる

radius

処理の半径［x方向 y方向］

feTurbulence：パーリンノイズによる描画

雲や大理石模様等の自然界にしばしば現れる紋様を擬似的に生成する．アルゴリズムが規定されているため，ブラウザごとの差異は見受けられない．この原始フィルター単体で利用されることはまず無く，他のフィルターと組み合わせることで真価を発揮する．firefox，choromeではこのフィルターがかけられた画像にさらなるフィルターをかけようとした際に不具合が発生するケースがあるので注意が必要．赤，緑，青，不透明度それぞれにノイズが設定されているため，適宜feColorMatrixを使ったりしてノイズを抽出する必要があるかもしれない．縦方向と横方向のbaseFrequencyを異なる値にすることで，印象がガラリと変わってくる．効果的に使うにはセンスが問われる．

baseFrequency

ノイズ関数の周波数(x y)．大きくなるほど細かくなる．1より小さい値を指定．※1を指定した場合はブラウザによって異なる結果となる．

numOctaves

ノイズ関数に対するオクターブ．大きくなるほどより複雑になる．1以上の整数を指定．

seed

乱数の種

stitchTiles

継ぎ目の処理方法

stitch

継ぎ目をつなぐ．

noStitch

つながない．

type

関数の指定

fractalNoise

ノイズ関数

turbulence

ゆらぎ関数

SVG2から導入されるフィルター

以下はSVG2から導入される原始フィルターである．

feDropShadow：影を付ける

グラフィックに影を付けるといった操作は頻繁に行われるがSVG1.1ではこの機能を複数の原始フィルターを組み合わせることで実現していた．SVG2では新たに原始フィルターとして定義されたことにより簡単に影を付けることが可能となっている．もちろん，これまでどおり影を自作することも出来る．

dx

影の横位置

dy

影の縦位置

stdDeviation

影の広がり

flood-color

影の色

flood-opacity

影の不透明度

feCustom：カスタムフィルター

原始フィルターによる画像効果は原則的に図形の変形を伴わないが，feCustomはこれらとは全く異なり，図形をメッシュ状に区切りそのメッシュを3次元的に変形することで立体感をもたせるものである．この変形には専用のシェーディング言語が用いられ，webglとの互換性が図られるとのことである．SVG2での導入は見送られました．

光源要素とフィルター

原始フィルターには光源を必要とするものがある．グラフィックを立体化し，影もしくは反射光を得るために用いられる．光源を表す要素として次の3つが定義されており，原始フィルターの子要素として配置する．またその際の光の色をlighting-color属性で指定することができる．

lighting-color

光の色

feDistantLight：平行光源

イメージとしては太陽光を考えると良い．elevationが90°の場合に明るさが最大となり，0°の時に0となる．

azimuth

光点の水平方向角

elevation

光点の垂直方向角

fePointLight：点光源

光源の位置から放射状の照明効果を与える．

x,y,z

光源の位置

feSpotLight：スポットライト効果

光源を与えて任意方向に照明効果を与える．照明の当たる角度と光の広がりを設定する．

x,y,z

光源の位置

pointsAtZ,pointsAtY,pointsAtZ

光を当てる方向

limitingConeAngle

スポットライトの範囲角

specularExponent

光の収束度合い．1でフラット．値を大きくするに従い明るい部分が狭まる．

グラフィック立体化の考え方

下記に示すfeDiffuseLighting，feSpecularLighting原始フィルターは与えられたグラフィックの内容を立体とみなし，光源からその立体に光を当てた結果を求める．その際立体化の基準としてグラフィックの不透明度が用いられる．不透明度が1の部分をsurfaceScaleの分だけ盛り上がっているものと見做し，その他の部分はその不透明度の割合に応じた高さを持つものとして扱われる．また，diffuseConstantでは光を当てた際の拡散度合いを設定する．通常全く光を拡散しない（つまり光を吸収してしまう）物体は目に見えないため，この値を0に設定すると影しか得られない．

なおこれらの処理はベクタデータのままでは難しいため，何らかの基準点をとりその点に対して個別に影・反射の計算を行うこととなる．kernelUnitLengthではこの計算の緻密さを設定する．フィルター処理を行う際のfilterResを更に指定したサイズで分割し，この分割結果に対して影の計算を行う．従って小さい値を設定するとより良い結果が得られるように思えるが，計算量が増大する割に実際にはそれほど良い結果は得られない．

※試したわけではないが，1px≠1画素でない環境（retinaディスプレイ環境等）では思うような効果が得られない気がする．filterRes属性とkernelUnitLength属性とを適切に設定することで回避可能かもしれない．

surfaceScale

不透明度が1の画素の高さ．

diffuseConstant

照明の拡散定数．

kernelUnitLength

照明効果を計算する際の単位格子の大きさ．小さい値を取ると傾斜部の計算が緻密になるものの，計算量が増大する．

また，得られる結果は元画像の色にはよらず，lighting-colorにのみ依存する．

feDiffuseLighting：照明効果

不透明な箇所が盛り上がっているものとして扱い，影画像として取得する．feSpecularLightingの逆．

feSpecularLighting：鏡面反射効果

光が当たっている部分をlighting-colorの透明度で得る．feDiffuseLightingの逆

specularExponent

反射度1〜128

このフィルターはfeGaussianBlurと組み合わせ，図形に立体感を持たせる常套手段として用いられる．

フィルター作成のヒント

原始フィルターを使いこなすにはそれなりに熟練が必要だが，無理に自作しなくてもサンプルを元にパラメータを弄るだけでもそれなりの効果を得られる．またsvgドローイングツールのinkscapeでは様々な応用フィルターが定義されているため，それらをそのまま利用してしまうのも手だ．下の例はinkscapeの「つや消しゼリー」フィルタを使ったもので，このようなフィルターのサンプルが多数収録されており，気に入ったものを自作のsvgに組み込むだけでも見栄えがする．

このような汎用的なフィルターについては，外部svgファイルに定義しておくことで，他のsvg画像に効果を流用できるのでおすすめである．

それでも自作に拘るなら，Hands On: SVG Filter Effectsを活用すると良い．このページでは限定的ではあるが原始フィルターを動的にかけることが出来る．非常に分かりやすいので試してみよう．

filterによる画像の合成

2つの画像をfilterを使って合成する場合，次の3つの方法が考えられる．が，ブラウザ毎にサポート状況が異なるので憶えておくと良い．

1. in属性を用いる
   合成したい画像を並べた上でg要素で囲み，全体にfilterを掛ける．これをfilter内部で取得し，feOffsetで個別の画像に分割する方法である．firefoxではfeImage要素においてidによる画像・図形の参照が効かないので，通常は合成したい画像毎にsvgファイルを用意する必要がある．これを単一のファイルで構成したい場合に有効な方法である．なお，chromeではveiwBoxから外れた描画要素はSourceGraphicで取得できないため，別の問題を発生させる場合がある．
2. feImage要素を用いる
   idによる画像の参照がfirefoxで無効となる．また，外部ファイルを参照した場合はoperaにてアニメーションが無視されてしまう．
3. BackgroundImageを用いる
   operaでのみ有効．

何れにせよどこかしらに問題が発生するため，適宜switch要素などを用いてブラウザ毎に内容を切り替えると良いだろう．

html要素へのfilterの適用

firefoxではsvg内で定義したフィルター効果はhtmlの要素にかけることも出来る．cssのfilter属性にsvgで定義したフィルターを設定する．下記のdiv要素にはフィルターをかけているので内部の文字がぼかされている．他のブラウザではforeignObject要素を使うと似たような処理ができるかもしれない．

なおfilter属性については現在htmlへの導入が検討されており，chrome等のwebkit系のブラウザではFilter Effects 1.0の一部を先行実装している．機能はsvgのものを追随しており，よく使うフィルターに関数名を付けてより使いやすくしたものとなっている．なおhtml要素専用であるため，svgの図形要素に適用することはできない．以下にfilterキーワードと対応するフィルターの定義の対比を示す．現状仕様と実装の両方がブレているようなので，あくまでfilter実装の参考程度に．

grayscale	グレイスケール 定義： <feColorMatrix type="matrix" values="(0.2126 + 0.7874 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0 (0.2126 - 0.2126 * [1 - amount]) (0.7152 + 0.2848 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0 (0.2126 - 0.2126 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 + 0.9278 * [1 - amount]) 0 0 0 0 0 1 0"/>
sepia	セピア 定義： <feColorMatrix type="matrix" values="(0.393 + 0.607 * [1 - amount]) (0.769 - 0.769 * [1 - amount]) (0.189 - 0.189 * [1 - amount]) 0 0 (0.349 - 0.349 * [1 - amount]) (0.686 + 0.314 * [1 - amount]) (0.168 - 0.168 * [1 - amount]) 0 0 (0.272 - 0.272 * [1 - amount]) (0.534 - 0.534 * [1 - amount]) (0.131 + 0.869 * [1 - amount]) 0 0 0 0 0 1 0"/>
saturate	彩度変換 定義： <feColorMatrix type="saturate" values="(1 - [amount])"/>
hue-rotate	色相回転 定義： <feColorMatrix type="hueRotate" values="[angle]"/>
invert	色の反転 定義： <feComponentTransfer> <feFuncR type="table" tableValues="[amount] (1 - [amount])"/> <feFuncG type="table" tableValues="[amount] (1 - [amount])"/> <feFuncB type="table" tableValues="[amount] (1 - [amount])"/> </feComponentTransfer>
opacity	不透明度 定義： <feComponentTransfer> <feFuncA type="table" tableValues="0 [amount]"/> </feComponentTransfer> opacity属性と何が異なるのか…
brightness	明度 定義： <feComponentTransfer> <feFuncR type="linear" slope="[amount]"/> <feFuncG type="linear" slope="[amount]"/> <feFuncB type="linear" slope="[amount]"/> </feComponentTransfer>
contrast	コントラスト 定義： <feComponentTransfer> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/> <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/> <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/> </feComponentTransfer> コレは間違いの気がする． <feComponentTransfer> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5)"/> <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5)"/> <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5)"/> </feComponentTransfer> ではなかろうか？
blur	ぼかし 定義： <feGaussianBlur stdDeviation="[radius radius]">
drop-shadow	影（color offset-x offset-y radius） ドロップシャドウは頻出のテクニックなので，半ば憶えてしまっても良い． (1)SourceAlphaをぼかす．(2)ぼかしたものをずらす．(3)影→元画像（SourceGraphic）の順に重ねる． 定義： <feGaussianBlur in="[alpha-channel-of-input]" stdDeviation="[radius]"/> <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> <feFlood flood-color="[color]"/> <feComposite in2="offsetblur" operator="in"/> <feMerge> <feMergeNode/> <feMergeNode in="input-image"/> </feMerge> htmlではわざわざこんなことをしないでもbox-shadowで十分な気もするが…