• HOME
  • imgタグに読み込んでいるsvg画像の色を変える方法
TomoyaOkada

imgタグに読み込んでいるsvg画像の色を変える方法

記事をシェアする

こんにちは、Okadaです。
案件でimgタグに読み込んでいるsvg画像の色を変えたい場面に遭遇しました。
インラインで読み込んでもよいのですが、色々と処理周りで見づらくなるので何か良い方法はないか調べていたら、以下のような方法がありました。


filterプロパティで変更する

filterを使えば簡単に変更できるようですね。
設定する際に以下のサイトで値を入れるとやりやすいです。
https://codepen.io/sosuke/pen/Pjoqqp

Target colorに変更したい色のHexを入力
あとは出力された値を指定するだけです。


備考

これは私のやり方が悪かったのか不明ですが、希望通りの色にならない時もありました。
ですが、出力された値をいじって変更できるので少し地道ですが希望の色にならなかった場合は、同じように検証から調節してみてください。


記事をシェアする