SVG タグ を 何度も書くのは つらい…

ただ img や svg use で 外部ファイルにした SVG の 色を変えたいだけなのに…

最近 勉強を兼ねて Vite 環境 で HTML + SCSS + JS の 構成 で コーディング しています

その中で 不便に感じたのが SVG の 色変え問題

せっかく fill 属性 で 色が変えられるのに 外部ファイルとして読み込むと 色が変えられなくなってしまいます

なので ちょっと トリッキーな方法 ですが

<img src="/assets/img/logo.svg" width="400" height="100" alt="logo">

<svg viewBox="0 0 400 100">
  <use xlink:href="/assets/img/logo.svg#ico" style="fill: #FFFFFF;"></use>
  <use xlink:href="/assets/img/logo.svg#txt" style="fill: #FFFFFF;"></use>
</svg>

などを JavaScript を 使って 実際の SVG 要素に 差し替えてしまおう という魂胆です

img -> svg に

こちらは img を svg に なるべく そのまま 置換しています

なので src で 1回 リクエストが飛んで 置換時に ファイル取得するので 2回 リクエストが 飛ぶと思います

一応 オプション を 用意しているので 取得する ファイルを指定することも可能です
( 全体的 に 変わりますので ご注意ください )

<img src="/assets/img/logo.svg" data-src="/assets/img/logo.svg" width="400" height="100" alt="logo">

<script src="/inline-svg.js" 
        data-selector='img[data-src$=".svg"]'
        data-src-key="data-src"
></script>

svg use -> 実体 に

こちらは svg use を そのまま 置換しています

ココの動作が いまいち解っていなくて リクエストはしていると思うんですけど どういう処理になっているんですかね??

毎回 リクエストが 飛ぶようであれば data-href 等に 変更して リクエストが 飛ばないように することも 考えても良いかもしれないです

最後に

SVG を使うことで 出来る事の幅は広がりますが 外部ファイルにすると 意外と制約が多いです

今回のように 単に色を変えたい場合でも 外部ファイルだと 思ったようにいきません

「じゃあインラインで書けばいいじゃん」という話もあるかもしれませんが
複数箇所に同じ SVG を使っていると 差し替えのときに漏れが起きそうでちょっと怖いんですよね…

皆さんは こういう場合 どうやって管理してるんですかね??

今回は JavaScript を使って img や use 要素を展開し 実体の SVG として扱うことで 自由なスタイリングを可能にする方法を試してみました

ちょっと手間はかかりますが 色の変更 や アニメーション などを 自在にコントロールしたい場合 には 十分検討する価値があると思います