SVGフィルター効果

フィルター効果
フィルター効果
フィルター効果モジュールレベル 1
	SVG フィルターでシミュレートされた木目テクスチャとドロップシャドウ
状態	ワーキングドラフト（WD）
年が始まった	2012年10月15日
初版	2012年10月15日
最新バージョン	2018年12月18日
プレビュー版	編集者の草稿; 2019年10月30日
組織	W3C
委員会	CSSワーキンググループ
編集者	ディルク・シュルツェ; ディーン・ジャクソン; ヴィンセント・ハーディ; エリック・ダールストローム;
ドメイン	視覚効果

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

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

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

SVGフィルタプリミティブ

feTurbulence、feDisplacementMap、Synchronized Multimedia Integration Languageを使用したアニメーション屈折効果のデモンストレーション

次の表は、SVG 1.0 と SVG 1.1 の両方で利用可能なフィルタプリミティブを示しています。SVG Tiny はフィルタ効果をサポートしていませんが、SVG Basic はここに示したフィルタプリミティブのみをサポートしています。

名前	要素	SVG 基本
ブレンド	`feBlend`	はい
カラーマトリックス	`feColorMatrix`	はい
コンポーネント転送	`feComponentTransfer`	はい
複合	`feComposite`	はい
畳み込み行列	`feConvolveMatrix`	いいえ
拡散照明	`feDiffuseLighting`	いいえ
ディスプレイスメントマップ	`feDisplacementMap`	いいえ
洪水	`feFlood`	はい
ガウスぼかし	`feGaussianBlur`	はい
画像	`feImage`	はい
マージ	`feMerge`	はい
形態学	`feMorphology`	いいえ
オフセット	`feOffset`	はい
鏡面照明	`feSpecularLighting`	いいえ
タイル	`feTile`	はい
乱気流	`feTurbulence`	いいえ

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

フィルターを適用するためのフレームワーク

<?xml version="1.0"?> <svg xmlns= "http://www.w3.org/2000/svg" version= "1.1" viewBox= "0 0 400 300" > <defs> <filter id= "AFilter" > <!-- フィルタの定義をここに記述 --> </filter> </defs> <text x= "10" y= "100" filter= "url(#AFilter)" >フィルタを適用</text> </svg>

外部リンク

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

参考文献

^ Schulze, Dirk; Jackson, Dean 編 (2018年12月18日). 「フィルター効果モジュールレベル1」www.w3.org . 2023年1月14日閲覧。

[1] Schulze, Dirk; Jackson, Dean 編 (2018年12月18日). 「フィルター効果モジュールレベル1」www.w3.org . 2023年1月14日閲覧。

テクスチャ:	feTurbulence、feDiffuseLighting、feDistantLight、feComposite、feBlend
影:	feGaussianBlur、feOffset、feColorMatrix、feBlend