SVGのフィルタ

SVGのフィルタ処理

SVGではフィルタといって、描画したものにぼかし等のエフェクトをかける処理を行うことができます。

filter要素

filterは要素で定義できます。
filter要素の中で各種要素でfilterを定義します。
下記ではfeGaussianBlurを使用します。
Gaussian Blurはガウス分布の式を使ったぼかしです。詳細は下記のリンク先で確認してください。
http://en.wikipedia.org/wiki/Gaussian_blur

filter.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5,10" />
    </filter>
  </defs>
  <circle cx="50" cy="50" r="50" fill="red" stroke="blue" stroke-wdith="5" filter="url(#gaussian)" />
</svg>

sddDeviationはガウス分布の式のx,yの値を表しています。
in属性はフィルタの入力の種類を表し、SourceGraphicはフィルタが適用されるグラフィックスを用いられます。
結果は下記のようになります。

feMerge

フィルタを複数レイヤ用意して重ね合わせたいときはfeMerge要素を使います。
feMerge要素は子要素にfeMergeNodeを持ち、それを重ね合わせます。
下記はfeGaussianBlurとfeOffset(dxとdyだけずらすフィルタ)を用意して、重ね合わせてみます。

filter2.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5,10" result="blur" />
      <feOffset in="SourceGraphic" dx="5" fy="5" result="offset" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="offset" />
      </feMerge>
    </filter>
  </defs>
  <circle cx="50" cy="50" r="50" fill="red" filter="url(#gaussian)" />
</svg>

フィルタを書けた結果はresultで名前をつけられるので、そのresultの値をfeMergeNodeのinにして重ね合わせています。
結果は下記のようになります。

様々なフィルタ

フィルタには他にもたくさんの要素があります。
また、 feDiffuseLightingや feSpecularLightingには光源を設定でき、光源を設定する要素にfeDistantLight, fePointLight, feSpotLight があります。

こちらはまた別の機会に説明しようと思ってます。