SVGフィルター効果

SVGフィルタ効果とは、スケーラブルベクターグラフィックス（SVG）ファイルに適用される効果のことです。SVGは、ワールドワイドウェブコンソーシアム（W3C）によって定義された、2次元ベクターグラフィックス用のオープンスタンダードなXML形式です。フィルタ効果は、指定されたソースベクターグラフィックに適用され、変更されたビットマップ画像を生成する一連のグラフィック操作で構成されます。

フィルタ効果はフィルタ要素によって定義されます。このfilterプロパティは、コンテナ要素またはグラフィック要素に設定することで、フィルタ効果を適用できます。各filter要素は、子要素として一連のフィルタプリミティブを含みます。各フィルタプリミティブは、1つ以上の入力に対して単一の基本的なグラフィック操作（ガウスぼかしや照明効果など）を実行し、グラフィック結果を生成します。ほとんどのフィルタプリミティブは何らかの画像処理を表すため、ほとんどの場合、フィルタプリミティブからの出力は単一のRGBAビットマップ画像になります（ただし、より高い解像度が要求された場合は再生成されます）。

元のソースグラフィック、またはフィルタプリミティブの結果を、1つまたは複数の他のフィルタプリミティブへの入力として使用できます。一般的な用途としては、ソースグラフィックを複数回使用することが挙げられます。たとえば、シンプルなフィルタで、元のソースグラフィックの黒いコピーを追加し、オフセットしてドロップシャドウを作成することで、1つのグラフィックを2つに置き換えることができます。結果として、同じ元のソースグラフィックを持つ2つのグラフィックレイヤーが作成されます。

以下の表は、SVG 1.0 と SVG 1.1 の両方で使用可能なフィルタプリミティブの一覧です。SVG Tiny はフィルタ効果をサポートしていませんが、SVG Basic は表に示されているフィルタプリミティブのみをサポートしています。

フィルター効果モジュールレベル1の現在のドラフトでは、ドロップシャドウ用のフィルタープリミティブが追加されています。このプリミティブはfeDropShadow、他のフィルタープリミティブの組み合わせの略記です。^{[ 1 ]}

• フィルター効果 – SVG 1.1（第2版） W3C仕様
• W3C SVG 入門: フィルターW3C 入門 (ドラフト) 章とフィルターに関する例。
• FILDROPカスタムSVGフィルター効果とジェネレーターフィルター効果のセット
• SVGフィルタービルダーは、既存のフィルターを視覚化（SVGをアップロードして表示）するだけでなく、独自のフィルターをゼロから設計して保存することもできる、インタラクティブなビジュアルSVGフィルタープログラミングツールです。