CSSだけでSVG画像の白と黒のパターンを作る

こんにちは。もきちです。

今回は、CSSでSVG画像の白パターンと黒パターンを作る方法をご紹介します。

SVGをHTMLファイルにインラインで書けば一番簡単なんですが、ちょっとソースが見づらくなりますよね。画像更新などの保守も大変です！

この記事でご紹介する方法は、SVG画像をimgタグで読み込んだ場合でも使えますので、ぜひ活用してください。

CSSのfilterを使用する

まずは、SVG画像を黒く塗りつぶす表示方法を説明します。

brightnessは明度を表します。

これを0で指定することで、明度が0、つまり真っ黒な状態となります。

明度が1だとデフォルトの色になります。

次に、SVG画像を白く塗りつぶす方法を説明します。

これは、先ほど紹介したbrightnessと、次に紹介するinvertを併用して実現します。

invertは色の反転を表します。

0がデフォルトで、1を指定することで、完全に色が反転します。

まず、brightness(0)で黒になり、次にinvert(1)指定で黒が反転されて白になります。

IEは動かない

2種類のfilterの指定をご紹介しましたが、この方法には欠点があります。

IEでは動きません！！

IE11でも駄目なので、IE対応が必要な場合は別の方法で実現する必要がありますね。

その場合は、冒頭で軽く触れたインラインで記述する方法がおすすめです。

こちらの記事が参考になります。

SVGアイコンの色をCSSで変更する

https://qiita.com/yamaki/items/3e2528ef7960c3b6ed9a

IEはいつの時代もWeb屋を困らせてくれますね…。