(HTML CSS) SVG, PNG 파일 이미지 색 변경하기

웹 사이트 제작 중에 파일 이미지를 변경해야 하는 일이 생겼다.

밤에 제작하느라 뇌가 굳어버려서 한참을 고민했는데 

손쉽게 해결하는 방법을 발견하여 글을 적게 되었다. 

디자이너 혹은 프런트 개발 연습을 위해 웹 사이트를 만드는 사람에게 도움이 되었으면 좋겠다.

 

예제

내가 만들고 있는 웹 사이트의 Vision과 Mission이미지이다. 

 

첫번째 시도

body에 검정 배경을 주어 img마다

background-color: white

를 주었다.  

그러나 사진과 같이 흰 배경이 마음에 들지 않았다.

한참을 찾아보니 fill: 속성을 이용하여 수정 하는 방법이 있었는데

내가 원하는 색을 줄 수 있다곤 하지만 적용에 실패했다

두 번째 시도

반전 속성

filter: invert(100%);

 

 

이것을 이용하면 내가 원하는 검정배경에 흰 선을 살릴 수 있다.

물론 background-color도 날려줘야 한다.

 

 

예제 2

적용 완료