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

SVGでもぼかせる。

こんにちは、「ふ」です。
SVGのフィルターシリーズ、今回はぼかし効果を与えるfeGaussianBlurについて紹介します。

CSSにもblurはあるが？

.elm {filter:blur(2px);}

「ぼかし」と言えばCSSのfliter:blurでも同様の効果を与えることができます。双方の違いも探りつつ、使い方を見ていきましょう。

SVGをじっくり学びたい方へ⬇︎。

SVGコーディングブック

著者：ふ

Apple Booksでみる

このたびSVGの書籍を出版しました。
しっかりとしたSVGスキルが身に付く内容となっています。参考にしてください。

使い方。

<feGaussianBlur
    stdDeviation = "正の数値"(ぼかしの分布。初期値:0)
/>

feGaussianBlurフィルターの持つ属性はstdDeviation属性、１つのみです。
これはstandard deviation（標準偏差）という意味ですが、むずかしく考える必要はありません。ぼかしにおける「広がり範囲」という認識で問題ありません。

stdDeviationの値は単位無しの正の数値で指定します。初期値は「０」で、ぼかしが掛からない状態です。
また負の数値を指定した場合には無効となってしまいます。

アウトライン化させたテキスト要素を使って、試してみます。

<svg vlewBox = "0 0 300 150">

「「１<g>」」
「「３ 〜テキストのパスデータ〜 」」
    <path d = " .... "/>
    <path d = " .... "/>
    <path d = " .... "/>
    <path d = " .... "/>
「「１</g>」」

</svg>

まとめてfilterを掛けられるよう、４つの<path>要素は<g>タグでグループ化させておきました。
filterを定義しましょう。

<svg vlewBox = "0 0 300 150">

<g>
「「３ 〜テキストのパスデータ、略〜 」」
</g>

<filter id = "「「５blur1」」"「「１ ..@1@」」
filterUnits = "userSpaceOnUse"「「１ ..@2@」」
>
<feGaussianBlur stdDeviation = "2"/>「「１ ..@3@」」
</filer>

</svg>

@1@ <filter>要素を定義。呼び出せるように「blur1」とid名をつけておきます。

@2@ filterUnits属性（filter効果の描画範囲）の初期値は「userSpaceOnUse」としておきましょう。初期値の「objectBoundingBox」のままだと、要素の周りにしかfilter効果が描画されません。

@3@ <filter>要素の内部で<feGaussianBlur>要素を定義します。
ぼかしの度合いをstdDeviation属性で指定します。ここでは「2」としました。

<g filter = "url(「「５#blur1」」)">
    <path d = "「「３ 〜略〜 」」"/>
    <path d = "「「３ 〜略〜 」」"/>
    <path d = "「「３ 〜略〜 」」"/>
    <path d = "「「３ 〜略〜 」」"/>
</g>

アウトライン化したテキストをまとめた<g>要素に対し、filter属性でフィルター定義を呼び出します。

要素をぼかすことができました。

x/y方向を個別に指定。

<feGaussianBlur stdDeviation = "「「１x y」」"/>

feGaussianBlurフィルターでは、x/y方向のぼかし具合を個別に指定することもできます。
数値を半角スペースで区切って２つ記述することで、１つ目の値がx方向、２つ目の値がy方向のぼかし具合として採用されます。

<filter id = "blur1" filterUnits = "userSpaceOnUse">

<feGaussianBlur stdDeviation = "「「１0 8」」"/>

</filer>

先ほど定義したstdDeviationの値を書き換えてみます。
x方向は初期値の「０（ぼかしなし）」、y方向に「８」としました。

y方向にのみ、ぼかし効果が広がっています。
あまり見ていると目がおかしくなりそうです。実用の際には注意しましょうね。

CSSのfilterと比較。

ところで、ぼかしフィルター(blur)はCSSにも用意されています。
feGaussianBlurとCSSのフィルター、双方に違いがあるのか比べてみましょう。

<svg  viewBox="0 0 200 100">
    
<circle id = "cssblur" cx = "50" cy = "50" r = "30" fill = "darkcyan"/>
<circle id = "svgblur" cx = "150" cy = "50" r = "30" fill = "darkcyan" />
    
</svg>

２つの円を用意しました。
それぞれにSVG、CSSでfilterを施してみます。

<filter id = "「「５blur2」」" filterUnits = "userSpaceOnUse">
<feGaussianBlur stdDeviation = "4"/>    
</filter>
    
<circle id = "cssblur" cx = "50" cy = "50" r = "30" fill = "darkcyan"/>
<circle id = "svgblur" cx = "150" cy = "50" r = "30" fill = "darkcyan" filter = "url(#blur2)"/>
    
<style>
#cssblur {filter:「「２blur(4px)」」;}
#svgblur {filter:url(「「５#blur2」」);}  
</style>

左の円にはfeGaussianBlur、stdDeviation:4とし、右の円にはCSSのfilter、blur:4pxを施しました。

結果⬆︎です。
２つの円ともぼかし具合は同じに見えます。stdDeviationの値は、1 = 1pxとして換算されているようですね。
そしてfeGaussianBlurもCSSのblurも、同じ性質の処理が施されていることがわかります。

同じ結果となるのであれば。
単純なぼかしを加えるだけなら、コード量の少ないCSSフィルターのほうが手軽ですね。

使い分けるのがよし。

feGaussianBlurとCSSのblurフィルター、２つは目的に応じて使い分けることをおすすめします。以下にそれぞれの特徴をまとめます。

CSSのフィルター。

・簡単！コード量も少ない。

・x/y方向共通の指定しかできない。

feGaussianBlur。

・コード量が多いので、指定が面倒。

・x/y個別に指定できる。

これらの特徴をみていくと、

→ サクッとぼかしたいなら、CSS。
→ xy方向に個別の変化を加えるなどの複雑な処理をしたいなら、feGaussianBlur。

という選択が良さそうです。
またこれは将来的に紹介する予定ですが、SVGのフィルターはさまざまなものを組み合わせることができます。その際にはSVGのfeGaussianBlurのほうを使用することになるので、使い方を知っておいて損はありません。

最後までお読みくださり、ありがとうございました。

ではまた〜 🎵