[SVG] filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法

この記事は SVG Advent Calendar 2014 の2日目の記事です。前日の記事は、t_motooka さんの「clip と transform との組み合わせ – 職業プログラマの休日出勤」でした。 SVG の filter 要素を使うとどんなことができるのかという基本的なことと、filter 要素を使ったわりと簡単にできるマウスオーバー効果の作り方をご紹介します。 filter 要素でどんなことができるのか filter 要素では SVG 内の画像をぼかしたり、色相を変えたりするようなフィルターを作ることができます。 ただ、filter 要素単独でフィルターを作る訳ではなく、原始フィルター（フィルターの効果を定義するようなもの？）と呼ばれる要素を子要素として記述しセットで使います。 原始フィルター要素は、feGaussianBlur（ぼかし）・feColorMatrix（明