アドベントカレンダー初担当、嬉しいです！！
初回は 「imgタグで読み込んだsvgの色変更」 という、最近知った画期的な技術（？）について書いてみます。
svgの色を変える王道2パターン
svgは便利ですが、読み込み方によってできること/できないことが変わります。
まずは色変更がしやすい2つの方法から。
1. svgをインラインで読み込む
いつ使う：サイトロゴなど出現頻度が少ないとき
色変更：fill や stroke を直接書き換える
See the Pen Untitled by 小笠原怜 (@dkyyizoy-the-selector) on CodePen.
インライン化してしまえば、cssで色を自由に操作できます。
ただ、同じsvgを何度も使う場合は毎回インラインで書くのが面倒！
2. svgを擬似要素でmask-imageとして読み込む
いつ使う：よく使うアイコンなど
色変更：background-color を指定
See the Pen Untitled by 小笠原怜 (@dkyyizoy-the-selector) on CodePen.
必ず特定の文字列とセットで使いたいアイコンなど、擬似要素で書いてしまえば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が単色の時に限りますが、ホバーで色を変える程度なら十分使えます。
こんな感じ↓
See the Pen imgタグで読み込んだsvgの色を変える by 小笠原怜 (@dkyyizoy-the-selector) on CodePen.
filter とはなんぞやという感じですが、カラーコードを filter に変換してくれる超便利なサイトが存在します↓↓↓
この方法を使えば、外部svgでも簡単に色変更ができます！便利！
おわりに
imgタグで読み込む外部svgの「色変えられない問題」は、filter を使うことで解決できました！
svgは読み込み方によって色変更の方法が変わるので、最適な方法を選ぶのが大事ですね。
それではまた〜〜