SVG iconに色を付ける

2022-05-25SVGCSS


ページ中に表示したSVNのアイコンに対して、色をつけたいというケースがあった

とりあえずcolorプロパティを変更しても反映されなかったため、調べたら

filterプロパティというものがありそれを適切に設定すると色を付けることが可能だった

<img src="hoge.svg" class="red">
.red {
  filter: invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);
}

個々で指定している数値はRGBから変換できるとうれしいなと思っていたら

下記のようなページで変換するのが良さそう

CSS Color Filter Generator


関連記事