SVG 아이콘 색상 CSS 안 바뀜 원인과 해결법
SVG 아이콘에 CSS로 color를 줬는데 색이 하나도 바뀌지 않는다면, 이유는 대부분 아이콘 파일 안에 fill="#3b82f6" 같은 색상 값이 이미 속성으로 박혀 있기 때문입니다. CSS의 color는 이 값을 자동으로 덮어쓰지 않습니다. 이 글은 왜 상속이 끊기는지 구조를 짚고, 파일 안의 fill·stroke 값 자체를 원하는 색으로 바꾸는 방법을 안내합니다.
요약 ① SVG의
fill/stroke속성은 CSScolor와 자동으로 연결되지 않고, SVG나 CSS에서fill: currentColor를 명시해야만 상속됩니다. ②<img>태그로 불러온 SVG는 페이지의 어떤 CSS도 내부에 전달되지 않아 애초에 색을 바꿀 수 없습니다. ③ 가장 확실한 방법은 SVG 코드 안의 fill/stroke 값 자체를 원하는 색상 코드로 바꿔버리는 것입니다.
문제
아이콘 세트를 다운로드해서 사이트에 넣고, hover 시 색을 바꾸려고 CSS에 .icon { color: red; }를 줬는데 아이콘은 그대로인 경우가 흔합니다. 개발자 도구로 열어보면 <path fill="#3b82f6">처럼 색상 값이 요소마다 이미 박혀 있는 걸 발견하게 됩니다.
이유는 SVG의 fill/stroke가 텍스트의 color와는 별개의 그리기 속성이기 때문입니다. fill의 초기값은 currentColor가 아니라 검정(black)이라서, 부모 요소의 color를 값으로 물려받으려면 SVG 쪽에서 fill="currentColor"라고 명시적으로 선언돼 있어야 합니다. 다운로드한 아이콘 대부분은 원작자가 이미 특정 색(예: 파란색)을 fill 속성 값으로 박아뒀기 때문에, 다른 색이 끼어들 자리가 없는 것입니다.
여기에 아이콘을 <img src="icon.svg">처럼 이미지 태그로 불러오는 경우는 더 근본적인 문제가 있습니다. 브라우저는 <img>로 불러온 SVG를 완전히 별개의 문서처럼 취급해서, 부모 페이지의 CSS가 currentColor조차 전달하지 못합니다. 이 경우는 CSS를 아무리 만져도 색이 바뀌지 않습니다.
해결
원본 SVG 코드를 손대지 않고 CSS만으로 해결하려면, 먼저 아이콘을 <img>가 아니라 <svg>...</svg> 형태로 페이지 HTML에 직접 붙여넣어야 합니다(인라인 SVG). 그런 다음 각 요소의 fill="#3b82f6" 속성을 지우거나 fill="currentColor"로 바꿔야, 비로소 CSS의 .icon { color: red; }가 상속되어 적용됩니다.
이 방식은 요소가 한두 개면 손으로 편집해도 되지만, 색조가 서로 다른 fill 값이 여러 개 섞여 있거나(테두리색과 채우기색이 다른 경우 등) 아이콘 개수가 많으면 하나씩 찾아 바꾸기가 번거롭습니다. 이럴 때는 <img> 태그로 쓰는 경우까지 포함해서, SVG 코드 자체의 fill/stroke 속성 값을 원하는 색으로 한 번에 치환하는 편이 더 확실합니다.
저희 도구로 확인하기 전에, 텍스트 편집기에서 직접 할 경우의 원리를 알아두면 결과를 검증하기 쉽습니다. SVG 코드 안에서 fill="..." 문자열을 찾아 원하는 색상 코드로 바꾸고, 선(테두리)도 바꾸려면 stroke="..." 값도 같이 바꾸면 됩니다. 단, 값이 none이나 transparent인 속성은 원래 "칠하지 않음"을 의미하므로 건드리지 않아야 합니다.
SVG 코드를 붙여넣고 색만 골라 바로 바꿔보세요
자주 막히는 지점
| 증상 | 원인 |
|---|---|
| 도구로 바꿨는데 실제 사이트에서 안 보임 | <img> 태그로 불러온 SVG는 파일 자체를 교체해야 반영됩니다. 바뀐 코드를 다운로드해 원본 파일을 덮어써야 합니다 |
| 선(테두리) 색만 그대로임 | "선 색도 일괄 변경" 체크박스를 켜지 않으면 stroke 속성은 건드리지 않습니다 |
| 일부 경로만 색이 안 바뀜 | 해당 요소에 애초에 fill 속성이 없거나 값이 none인 경우로, 원래 색이 없는 부분이라 정상입니다 |
| 그라디언트가 단색으로 바뀜 | fill="url(#gradientA)"처럼 그라디언트를 참조하던 값도 문자열 치환 대상이라 단색으로 덮어써집니다 |
CSS의 .icon { fill: red }가 안 먹힘 | 아이콘에 style="fill:..." 인라인 스타일이 있으면 외부 CSS보다 우선순위가 높아 이깁니다 |
정리
SVG 아이콘 색이 CSS로 안 바뀌는 건 대부분 fill/stroke 속성이 색을 직접 지정하고 있어 color 상속이 끊긴 것이 원인이고, <img> 태그로 쓰는 경우는 애초에 CSS가 침투하지 못하는 구조 때문입니다. 인라인 SVG로 바꾸고 fill: currentColor를 쓰는 방법도 있지만, 여러 색상 값을 한 번에 원하는 색으로 바꾸고 싶다면 코드 안의 값 자체를 치환하는 편이 빠릅니다.
SVG 코드를 붙여넣고 색만 골라 바로 바꿔보세요
자주 묻는 질문
![]()
태그로 쓰는 아이콘도 색을 바꿀 수 있나요?
<img>로 불러온 SVG는 페이지 CSS가 내부에 전달되지 않으므로 CSS로는 바꿀 수 없습니다. 대신 SVG 파일 자체의 fill/stroke 값을 원하는 색으로 바꾼 뒤, 그 파일로 <img> 소스를 교체하면 됩니다.
그라디언트나 패턴을 쓰는 아이콘도 지원하나요?
값 자체를 새 색상으로 바꾸는 방식이라, fill="url(#gradientA)"처럼 그라디언트 정의를 참조하던 부분도 지정한 단색으로 바뀝니다. 그라디언트 효과를 유지하고 싶다면 <defs>에 정의된 그라디언트의 색상 값을 직접 수정해야 합니다.
일부 아이콘 조각만 색이 안 바뀌는 이유는 뭔가요?
해당 요소에 애초에 fill 속성이 없거나 값이 none/transparent인 경우입니다. 이런 요소는 원래 채워지지 않는 부분(빈 공간, 외곽선만 있는 조각)이라 색을 바꿀 대상 자체가 아닙니다.