SVG 이미지의 색깔 CSS filter로 바꾸기

svg 태그에 단독으로 주거나,

svg 이미지를 background-image로 쓰는 경우 그 태그에만 단독으로 filter를 줘야 한다.

안 그럼 background-image를 가진 태그의 다른 요소들까지 filter의 영향을 받는다.

 

https://angel-rs.github.io/css-color-filter-generator/

CSS Color Filter Generator

 

 

SVG의 기본 색상은 #000000 이라고 생각하면 됨

다른 색이 적용된 상태의 SVG에 filter를 주면 뭔가 결과가 이상했다.

 

그래서 background-image로 svg를 코드를 넣을 땐 나는 항상 #000000인 상태로 씀

나중에 색깔을 변경할 일이 없으면 원하는 색상으로 바로 쓰는 게 편하긴 함

 

 

색깔을 고르고 Get Filter! 를 클릭하면 위와 같이 나오고,

CSS 코드가 나오면 copy 를 눌러서 복붙하면 끝

 

1000%니 4335%니 숫자들이 좀 거슬리긴 하는데 어쩔 수 없다.

filter 값은 Get Filter 버튼을 누를 때마다 같은 색이라도 값이 계속 바뀐다.

아래의 Loss 값도 계속 달라짐.

 

 

Loss 0.0이 나올 때까지 계속 Get Filter 버튼을 누른다.(안 눌러도 됨 차피 사람 눈으로 그 정도는 차이가 안 느껴짐)