SVG フィルター効果

フィルター効果

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

SVG フィルター効果は、 Scalable Vector Graphics (SVG) ファイルに適用される効果です。SVG は、World Wide Web Consortium (W3C)によって定義された2 次元ベクター グラフィックスのオープン スタンダード XML 形式です。フィルター効果は、特定のソース ベクター グラフィックに適用され、変更されたビットマップ結果を生成する一連のグラフィック操作で構成されます。

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

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

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

フィルタ効果モジュールレベル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 をアップロードして) できるだけでなく、独自のフィルターを最初から設計して保存することもできます。