アイコン等でよく使用されるSVG画像ですが、マウスオンの状態や、背景色の影響等で、色を変更したいというケースがよくありますよね。今回はシンプルに黒色もしくは白色のどちらかに変更したい時に使用できる「filter」の指定をご紹介します。
filterとは？
Photoshop等のソフトを使用したことがあれば馴染みがあるかと思いますが、filterは画像（＝要素）に対して「ぼかし」や「明るさ」、「色相」「彩度」「反転」といったグラフィック効果を適用するためのCSSプロパティです。様々なグラフィック効果を適用できる反面、明確に「この色にしたい」といった指定は意外と難しいのがこのfilterなのですが、黒色か白色に変更するのはシンプルな指定で実現することが可能です。
filterで黒色もしくは白色にするための指定
まず結果から。黒色もしくは白色にしたい画像に対して、以下のように指定します。
/* 黒色 */
img {
filter: brightness(0);
}
/* 白色 */
img {
filter: brightness(0) invert(1);
}
「brightness(0)」とすることで、明るさが0になる＝真っ黒になる、という処理になります。値は1がデフォルトで変化無し、0が完全に真っ暗の状態で、0.2や0.5といった指定、もしくは20%や50%といったパーセントでの指定が可能です。また、200%にすれば明るさ2倍、という指定になります。今回は黒にしたいので、値は0と指定しています。
続いて白色ですが、「brightness(0) invert(1)」としています。これは「brightness(0)」とした状態から「invert(1)」で色を反転させている＝真っ黒から真っ白に反転させている、という処理になります。
元の画像とfilterを適用した画像のサンプルがこちらです。ちなみに見出しで「SVG画像」と書いていますが、背景透過のPNG画像に対しても使用できます。
元の画像
黒色に変更した画像（filter: brightness(0)）
白色に変更した画像（filter: brightness(0) invert(1)）
※わかりやすいよう背景色を追加しています
応用：filterでグレースケールを指定してモノクロ写真に
filter機能の応用として、グレースケールを指定することが出来ます。この機能を応用すれば、写真をモノクロにしておいてマウスが乗ったらカラーにする、といった処理も出来ますね。
/* 写真をモノクロにする */
img {
filter: grayscale(100%);
}
元の写真
モノクロに変更した写真（filter: grayscale(100%)）
応用：filterでセピアを指定してノスタルジックな雰囲気に
filter機能の応用として、セピアという指定もあります。この指定を写真に適度に適用するとノスタルジックな雰囲気を演出することが出来ます。
/* ちょっとノスタルジックな雰囲気にする */
img {
filter: sepia(70%);
}
元の写真
白黒に変更した写真（filter: sepia(70%)）
いかがでしたでしょうか。色別に画像を用意すれば済む内容ではありますが、CSSのみで完結出来た方が良いケースも多いはず。そんな時にご活用下さい。
以上、SVG画像をCSSだけで黒色もしくは白色に変更する「filter」の設定と、グレースケールやセピアでの応用でした。
