アドベントカレンダー初担当、嬉しいです！！
初回は「imgタグで読み込んだsvgの色変更」という、最近知った画期的な技術（？）について書いてみます。

svgの色を変える王道2パターン

svgは便利ですが、読み込み方によってできること/できないことが変わります。
まずは色変更がしやすい2つの方法から。

いつ使う：サイトロゴなど出現頻度が少ないとき
色変更：fill や stroke を直接書き換える

インライン化してしまえば、cssで色を自由に操作できます。
ただ、同じsvgを何度も使う場合は毎回インラインで書くのが面倒！

いつ使う：よく使うアイコンなど
色変更：background-color を指定

必ず特定の文字列とセットで使いたいアイコンなど、擬似要素で書いてしまえばhtmlが冗長にならずに済みます。
マスクとして読み込むので、塗りつぶす色は background-color で！

でもimgタグで外部svgを読み込む場合は…

外部svgファイルをimgタグで読み込む場合、以上の方法では色変更ができません。

<img src="/icon.svg">

インラインじゃないので fill にアクセスできず、マスクでもないから背景色で塗りつぶせない…。
そこで便利なのが、filter で色を変える方法です！

img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(199deg) brightness(105%) contrast(101%);;
}

彩度・明度・コントラストを操作して目的の色に近づけることができます！
svgが単色の時に限りますが、ホバーで色を変える程度なら十分使えます。

こんな感じ↓

filter とはなんぞやという感じですが、カラーコードを filter に変換してくれる超便利なサイトが存在します↓↓↓

この方法を使えば、外部svgでも簡単に色変更ができます！便利！

imgタグで読み込む外部svgの「色変えられない問題」は、filter を使うことで解決できました！
svgは読み込み方によって色変更の方法が変わるので、最適な方法を選ぶのが大事ですね。

それではまた〜〜