[[SVG]]ファイルを指定したimgタグに対し、[[filter (CSS)|filter]]を適用することで実現できる。 ## 画像の用意 **真っ黒 ( `rgb(0, 0, 0)` )** のSVG画像を用意する。 ## 適応したい色のfilterを作成 [[css-color-filter-generator]]を使う。作成した[[filter (CSS)|filter]]は[[カスタムプロパティ (CSS)|カスタムプロパティ]]に格納するのがオススメ。 ```css :root { --color-primary: #3db680; --color-filter-primary: brightness(0) saturate(100%) invert(57%) sepia(24%) saturate(971%) hue-rotate(101deg) brightness(102%) contrast(89%); } ``` ## 画像への適応 たとえば、alt属性に`primary`という文字が含まれる場合に着色する場合。 ```css img[alt~="primary"] { filter: var(--color-filter-primary); } ``` 以下のような感じになる。 ```html <img src="..." alt="primary" /> ```