imgタグで表示したSVGの色を変更する方法

SVGの色を変更する方法を検索して色々やってみたけど、どれもダメ……。
path {fill: red;}とかやっても全然ダメ。

HTMLにSVGのソースを直書きするのは絶対に嫌。
ソースが汚すぎる。
SVGのソースをいじるのも、訳わからんから絶対に嫌。

「imgタグで表示したSVGの色を変更する方法」じゃないと絶対に嫌。
そんな意識の低いweb屋が、唯一成功した方法をメモしておきます。

aタグで挟めば普通にリンクもはれました。

imgタグで、そのまま表示したSVGのカイちゃま

<img src="kaicyama.svg" width="200" height="200">

SVG画像は普通にimgタグで表示できます。
真っ黒でかわいいですね。

CSSで「#865F4A」に色を変えたSVGのカイちゃま

<img src="kaicyama.svg" width="200" height="200" class="kaicyama">

.kaicyama {
	filter: invert(38%) sepia(29%) saturate(576%) hue-rotate(337deg) brightness(95%) contrast(88%);
}

https://codepen.io/sosuke/pen/Pjoqqp

↑のサイトでフィルターの値を生成してCSSに書くだけ。
左下の白いところにフォームがあります。
（黒背景のソースコードのとこは関係ない）

「Target color」にカラーコードを入力して「Compute Filters」をクリック。
filterが生成されるのでCSSの.kaicyamaにコピペします。

HTMLに書いたimgタグに.kaicyamaを指定したら完了です。

元のSVGの色が真っ黒（#000000）じゃないとダメみたい。

どちらのSVGカイちゃまにもリンクをはってあるので、クリックしてみてください。
SVGはリンク画像には使えないって書いてあるサイトも多いですが、aタグで挟んだら普通に機能しました。