Chrome（Chromium）で<svg><use>タグで設置したSVG画像の色が変わらない不具合？もしかしたらこれが原因。

最近コーディングでChromeとSVGに関するトラブルを発見しまして、ちょっと困ったことがあったので情報共有します。

現象

ChromeやChromiumベースのEdgeやBraveなどで、<svg><use>タグで設置したSVG画像のfillなどのCSS設定が反映されない。

発生条件と原因

①HTMLでは外部SVGファイルを<svg><use>タグを使って設置している

<svg viewBox="0 0 100 100" class="my-ssetting"><use xlink:href="images/example.svg#svg"></use></svg>

②CSSでは上記のSVGに対して配色などの設定をしている

 svg.my-setting { fill: #000; }

③SVGファイル内でもstyleの設定がされている

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><style>.cls-1{fill:#f00;}</style></defs>
  <rect class="cls-1" width="100" height="100"/>
</svg>

上記のときに以前のChromeやSafari等他のブラウザでは②のCSS設定が反映され#000（黒色）で表示されました。
現象が発生するChromeバージョンからは③のSVGファイル内の設定が反映されるので#f00（赤色）で表示されます。

対処法

CSSでプロパティ変更するSVG画像は、SVG画像ファイル内のstyle設定をしない。

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100"/>
</svg>

このように、SVGファイル内のstyle設定を消すとCSS側のfill設定が反映されます。

この現象は納品・公開済みの案件でクライアント様からご指摘を頂き気が付きました。
どのバージョンから発生していたかが明確ではないですが、Chrome 126.0.6478.183で確認したので、おそらく2024年7月あたりのアップデートからだと思われます。
もちろん納品時はChrome含め複数のブラウザで検証していたので、そのときにはこのトラブルは発生していません。
ごく最近の新しいトラブルだと思われ、まだバグ報告などの情報を見つけきれていないのですが、これがChromeの仕様変更による正常な挙動なのかアップデートの不具合なのかが不明です。

なのでいずれChromeアップデートで元に戻るかもしれませんが、<svg><use>タグでsvg画像を設置してCSSでプロパティを変更する場合は、SVG側にはstyle設定をしないほうが良いでしょう。