Simple Answer

simpleanser

svgをhtmlでインライン無しで色変更したい

なかなか良い方法がない。色変えたいだけなのに。 いろんなところで同じsvgファイルを使うので、インラインはしたくない。

候補1

filterで色を付ける。 かなり特殊なやり方だが、今のところ下記が一番シンプルかも。

svgをJSなし・インライン読み込みなしで自由に色を変更する方法! | ブルーシュ

この記事の通り、黒色にフィルターをかけて色を制御するが、黒にかけるフィルターは下記で生成する。

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

候補2

下記のサイトにあるとおり、

外部から読み込んだSVGアイコンの色をCSSで変更する方法

  <svg>
    <use xlink:href="./xxxx.svg#symbol" />
  </svg>

のような形式して指定する方法。 ただし、これの場合、svgタグのせいで、変な領域を確保してしまう。 単純にxxxx.svgの領域と同じにしたい場合は、上記のsvgタグにもxxxx.svgと同じwidth, hightを指定する必要あり。 そうなると、若干インラインしている感じになりそう。。微妙。

(あと画像の拡大縮小もうまくできなかった。)

どうに回避策はないか。。。。

候補3

mask + 背景色

トリッキーだがこんなのもあるんだな。

外部読み込みSVGに色を付ける