SVG 아이콘을 사용할 때 색상을 CSS로 변경하고 싶은데 안 될 때가 있습니다. SVG 색상 제어 방법을 정리합니다.
인라인 SVG
SVG를 HTML에 직접 삽입하면 fill과 stroke를 CSS로 제어할 수 있습니다. SVG 내부의 fill="#000"을 fill="currentColor"로 바꾸면 부모의 color 속성을 따릅니다.
외부 SVG 파일
img 태그나 background-image로 불러온 SVG는 CSS로 색상을 바꿀 수 없습니다. 이 경우 CSS filter를 사용합니다. filter: brightness(0) invert(1);로 흰색으로 만들 수 있습니다.
mask 활용
mask-image로 SVG를 마스크로 사용하고 background-color로 색상을 지정하는 방법도 있습니다. 색상 변환기로 원하는 색상의 코드를 확인하세요.
아이콘 라이브러리
Heroicons, Feather Icons 등은 기본적으로 currentColor를 사용해서 색상 변경이 쉽습니다.
인라인 SVG 삽입 방법
React에서는 SVG를 컴포넌트로 import해서 사용합니다. fill="currentColor"가 설정되어 있으면 CSS의 color 속성으로 색상을 제어할 수 있습니다. Vue에서도 비슷하게 SVG 컴포넌트를 사용하거나 v-html로 삽입합니다. 색상 변환기로 원하는 색상의 HEX 값을 확인하고 CSS에 적용하세요.
아이콘 폰트 vs SVG
Font Awesome 같은 아이콘 폰트는 color 속성으로 쉽게 색상을 바꿀 수 있지만, 성능과 접근성 면에서 SVG가 더 권장됩니다. SVG는 벡터라 확대해도 선명하고, 각 요소에 개별적으로 접근할 수 있습니다.
실용적인 팁
색상 작업을 할 때 자주 쓰는 값들은 메모장이나 노션에 정리해두세요. 매번 검색하는 시간을 아낄 수 있습니다. 색상 변환기를 북마크해두면 필요할 때 바로 접속할 수 있습니다.