(Javascript) HTML SVG파일에 원하는 색상 적용하는 방법

HTML SVG파일 색상 변경 코드

Html에서 Img 태그에 SVG파일을 업로드하고 난 후, 색상을 변경하고 싶을 때가 있는데, 그때 CSS Filter 효과를 통해 원하는 색상을 입혀줄 수 있습니다. 

 

먼저, 원하는 HEX 코드가 필요합니다. 

 

HEX 코드는 다양한 경로를 통해 알 수 있는데 아래 사이트에서 Color Picker를 통해 알아내거나, 원하는 이미지를 업로드해서 HEX코드를 따올 수 있습니다.

👍 Color Picker online | HEX Color Picker | HTML Color Picker

클릭해서 HEX 코드 알아내기

사용 방법

원하는 색상 Hex코드로 입력하세요. (ex: #ffff)

원하는 색상 RHTML 핵스코드의 실제 색상 background-color Filter로 적용시킬 색상 filter 아래 filter 코드를 복사하세요! 완벽하다는 문구가 나올때 까지 적용을 눌러주세요!

결과 확인

실제론 위와 같은 검은색 SVG 파일이지만, filter 코드를 CSS를 통해 입력해주게 되면 아래와 같은 결과를 얻을 수 있습니다.

---

오늘은 이렇게 HTML에서 SVG파일에 원하는 색상 코드를 입히는 방법에 대해 알아봤습니다.

 

읽어주셔서 감사합니다. 🤟