こんにちは、てっちゃんです。
あけましておめでとうございます。本年もよろしくお願いします。
お正月はゆっくり休まれたでしょうか？僕は、年末から飲み過ぎで体調を崩したおかげでまさに寝正月でした。。。

さて今回はSVGの2回目ですが、画像に対して様々な効果をかけられることをご紹介していこうと思います。

フィルター効果

フィルターをかけるときはSVGデータ以外にも画像自体にもかけられ、css3よりも対応ブラウザが多いので使いやすいと思います。
以下に例をあげていくのでご覧ください。

ぼかし

filterの指定はidで直接書いているがcssのクラスで書くことも出来ます。
stdDeviationでぼかしの強さを決めています。

See the Pen xbgGLK by tetsu (@oremega) on CodePen.

色相の変化

feColorMatrixには色変換のタイプがそれぞれあります。

• matrix（変換行列を指定して色を変換）
• saturate（彩度を変更）
• hueRotate（色相を変換）
• luminanceToAlpa（明度を抽出）

を指定し、values属性に効果の強さを値で入力します。

色相

See the Pen ogBXRY by tetsu (@oremega) on CodePen.

モノクロ

saturateは彩度を制御するので、値を0にするとモノクロになります。

See the Pen jEyPJX by tetsu (@oremega) on CodePen.

マスキング

はっきりと分けずに境界線をぼかす効果を作るのがマスキングです。グラデーション以外にも単色でも使えます。

See the Pen XJpmWb by tetsu (@oremega) on CodePen.

クリッピング

clipPathにマスクとなる図形を描いてそれを対象部にID指定するとクリッピングされます。

See the Pen MYJebW by tetsu (@oremega) on CodePen.

まとめ

今回はフィルターの一部だけをピックアップしていますが、他にも沢山あるので以下をみるのもいいでしょう。
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_11.htm

モノクロやぼかしは、よく使いそうなので機会あればどこかで使ってみてください。
ただし、IE9以下でfilterが使えないので要注意です。