2020.01.200こんにちは。今回は、CSSでSVG画像の白パターンと黒パターンを作る方法をご紹介します。SVGをHTMLファイルにインラインで書けば一番簡単なんですが、ちょっとソースが見づらくなりますよね。画像更新などの保守も大変です!この記事でご紹介する方法は、SVG画像をimgタグで読み込んだ場合でも使えますので、ぜひ活用してください。CSSのfilterを使用するまずは、SVG画像を黒く塗りつぶす表示方法を説明します。brightness(0);}brightnessは明度を表します。これを0で指定することで、明度が0、つまり真っ黒な状態となります。明度が1だとデフォルトの色になります。次に、SVG画像を白く塗りつぶす方法を説明します。これは、先ほど紹介したbrightnessと、次に紹介するinvertを併用して実現します。invert(0);}invertは色の反転を表します。0がデフォルトで、1を指定することで、完全に色が反転します。brightness(0)で黒になり、次にinvert(1)指定で黒が反転されて白になります。IEは動かない2種類のfilterの指定をご紹介しましたが、この方法には欠点があります。IEでは動きません!!IE11でも駄目なので、IE対応が必要な場合は別の方法で実現する必要がありますね。その場合は、冒頭で軽く触れたインラインで記述する方法がおすすめです。こちらの記事が参考になります。SVGアイコンの色をCSSで変更するhttps://qiita.com/yamaki/items/3e2528ef7960c3b6ed9aIEはいつの時代もWeb屋を困らせてくれますね...。Awesomeで劇的にカッコイイUIを実現【デザインいらず】なべっち2017.12.08cssfilterSVGWeb技術スポンサーリンクPOPULARノウハウPHPのセッションが勝手に消えてしまう問題と解決法のえる2019.08.23おすすめiPadをノート代わりにして6か月。