フーノページ



SVG フィルター

SVGフィルター、使い方。








Contents



webでCG効果。


こんにちは、「ふ」です。
SVGフィルターのトップページになります。ここでは基本的なSVGフィルターの実装と、個別の色々なフィルター記事を紹介しています。

SVGフィルターとは？

SVGのフィルターは、要素にさまざまな効果を与えることのできる機能です。
⬇︎にあげたものはほんの一例です。組み合わせ次第で、CGソフトのような画像処理をコーディングだけで実装することが可能になります。


なおSVGフィルターには、

🔹 CSSのフィルターよりも豊富な機能
🔹 フィルター同士を複雑に組み合わせた処理も可能
🔹 テキストやimgなどのHTML要素にも使える

などのたくさんのメリットがあります。webに取り入れることで、表現の幅が大きくひろがることでしょう。


CSSフィルターはこちら⬇︎。

CSSのフィルター、使い方。

〽️ CSSだけでCG処理。






SVGフィルターの基本的な実装。


SVGフィルター実装の手順は⬇︎のとおりです。

・<filter>コンテナを定義。
・内部に必要なフィルターを配置。
・効果を与えたい要素側から、<filter>コンテナを参照する。

〜くわしくみていきましょう。 

<svg viewBox = "0 0 200 200">
	<rect id = "「「５sikaku」」" x = "20%" y = "20%" width = "60%"
	height = "60%" fill = "dodgerblue"/>	
</svg>

正方形を作りました。id名を「sikaku」としています。
<filter>コンテナを定義しましょう。 

<svg viewBox = "0 0 200 200">

    「「３<!--filterコンテナを定義-->」」
    <filter id = "「「５filter01」」">
    </filter>
    
    <rect id = "sikaku" x = "20%" y = "20%" width = "60%"
	height = "60%" fill = "dodgerblue"/>	
</svg>

SVGフィルターを利用するには、<svg>タグの中で<filter>要素を定義します。
フィルターを掛ける要素側から呼び出す形になるので、識別用のID名をつけておきましょう。ここでは「filter01」としています。

なお<filter>要素を定義するだけでは、呼び出したとしても何も起きず、要素はそのままの状態で出力されます。<filter>要素は、各種効果を持つフィルターを格納するコンテナを構築するだけに過ぎないのです。

このfilterコンテナの中に、ぼかし効果を持つ<feGaussianBlur>を配置してみましょう。 

<svg viewBox = "0 0 200 200">

	<filter id = "filter01">
	<「「１feGaussianBlur」」 stdDeviasion = "2"/>
	</filter>
    
	<rect id = "sikaku" x = "20%" y = "20%" width = "60%"
	height = "60%" fill = "dodgerblue"/>	
</svg>

filterコンテナの中に<feGaussianBlur>が入りました。これではじめて、filterの効果が得られるようになります。
<feGaussianBlur>の内部にある「stdDeviation」という属性がありますが、これはぼかしの度合いを数値で指定するものです。

SVGの各種フィルターにはそれぞれ固有の属性が用意されており、それらを使ってフィルターのパラメータを調整することができます。

要素に効果を加えるには、<filter>要素自体を参照させます。参照にはSVG要素のプレゼンテーション属性で呼び出す方法と、CSSのfilterプロパティで呼び出す２通りの方法が利用できます。 

<rect id = "sikaku" x = "20%"　y = "20%" width = "60%"
height = "60%" fill = "dodgerblue" 
filter = "url(「「５#filter01」」)"
/>

先づはプレゼンテーション属性で、filterを呼び出してみます。
<rect>要素内のfilter属性で、定義したfilterのurlを指定します。

正方形にぼかしを掛けることができました。 

<svg viewBox = "0 0 200 200">

	<filter id = "「「５filter01」」">
	<feGaussianBlur stdDeviasion = "2"/>
	</filter>
    
	<rect id = "sikaku" x = "20%" y = "20%" width = "60%"
	height = "60%" fill = "dodgerblue"/>	
    
    「「３<!--CSSによる指定-->」」
    <style>
        #sikaku {
        filter:url(「「５#filter01」」);
        }
    </style>
</svg>

フィルターの指定はCSSで行うこともできます。
CSSのfilterプロパティは通常、blurやdrop-shadowなどの関数を値にとるのですが、url(#..)形式で<filter>のidを指定してやれば、適用させることができます。


HTML要素にもフィルター。

HTMLファイル内にインラインで記述されているSVGフィルターであれば、テキストや画像などのHTML内要素に対して適用させることもできます。 

<body>

<svg style = "「「１position:fixed」」;">
    <filter id = "filter02">
        「「３<!--フィルターの内容-->」」	
    </filter>
</svg>	

    <img id = "nekoimg" src = "neko.png">

</body>

<body>内にはフィルターを定義するためだけに、<svg>要素を配置しています。これをそのままブラウザに読み込ませた場合、強制的に300*150pxのSVG領域が確保されてしまい、全体のレイアウトを崩してしまうことになります。
そこで<svg>のstyle属性で「positon:fixed」と指定し、<body>のレイアウトとは独立させておくことをお勧めします。

◾️ neko.png

先のコード、<body>内には画像を1枚配置し、idを「nekoimg」としています。
これにSVGのフィルターを掛けてみましょう。 

<svg style = "position:fixed;">
<filter id = "「「５filter02」」">
    <feComponentTransfer>
    <feFuncB type = "linear" slope = "-1" intercept = "0.3"/>	
    </feComponentTransfer>	
</filter>	
</svg>

今度はRGB値を個別で操作する<feComponentTransfer>を使ってみます。 

#nekoimg {
	filter:url(「「５#filter02」」);
}

CSSで、参照先のfilterを指定。

一般のHTML要素である<img>にSVGフィルターを掛けることができました。

もちろん、こんなふうに、テキストに対してフィルターを掛けることもできます。

このあとはSVG特有の、色々なフィルターおよび、詳細ページへのリンクも案内していきますね。




単品で使える効果。


入門の方、まづはここから始めてみるとよいでしょう。

SVGのぼかしフィルター、feGaussianBlur。

〽️ x/y方向個別に指定が可能。


SVG、feMorphologyフィルターで要素を太く/細くする。

〽️ 1番簡単なSVGフィルタ。





合成系フィルター。


フィルター同士を「つなぎ合わせるフィルター」も存在します。
複数のフィルターを直列ではなく、複雑に接続することもできますよ🎵

SVG、feMergeでフィルター効果を重ねて表示。

〽️ filter結果を合成しよう。


SVG、feCompositeで要素を切り抜き。

〽️ SVGでパスファインダー的な。


SVGのずらしフィルター、feOffset。

〽️ 「合成ありき」のフィルター。





色を加工する。


色を加工するフィルターについて紹介。
写真を２色パターンにしたりするなど、トリッキーな効果が期待できます。

SVG、feBlendで色をブレンド。

〽️ 各modeの仕組みも解説。


SVG、feComponentTransferフィルターで色変換。

〽️ RGBAごとの操作が可能。


SVG、feComponentTransferのgamma、discrete、table関数について。

〽️ トリッキーな効果を演出。


ガンマ特性、ガンマ補正について知っておく。

〽️ web屋向けガンマ講座。





画像を取り込む。


外部画像をfilterコンテナの中に取り込み、色々な処理をほどこすことができます。

SVGのfeImageフィルター。

〽️ 外部画像をフィルターで合成。


SVG、feTileで画像をタイル状に並べる。

〽️ オブジェクトの形に合わせて敷き詰め。





ノイズとマッピング。


PhotoShopの雲模様で知られるフラクタルノイズ。SVGフィルターでもできてしまいます(！)。さらにそのノイズを、要素にマッピングしてしまいましょう。

SVG、feDisplacementMap〜波形を要素にマッピング。

〽️ <img>やテキストにも使える。


SVG→dataURI変換。

〽️ SVGをdataURIに変換。


SVG、feTurbulenceでノイズ発生。

〽️ SVGフィルターの大ボス。





続々追加予定。


SVGフィルターの記事は今後も追加していきます。
各種フィルターについて、さらにはフィルター同士を組み合わせたチュートリアル記事も追加していく予定です。
当ページを活用して、CSSだけでは表現できない彩りをwebに加えていきましょう。

お楽しみに〜 🎵



「ふ」です。

ふ

ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。