[CSS] SVG 의 색상을 변경 하는 방법 feat. fill, currentColor

웹사이트를 만들면서 간단한 아이콘 등은 이미지 파일이 아닌 오픈소스 SVG 형식의 파일을 자주 사용하는데요.

보통 SVG 파일은 일반적인 이미지 파일들과 다르게 코드로 구성되어 있다 보니 간단한 수준에서는 쉽게 모양을 변형하거나 색상을 변경 할 수 있습니다.

그런데 이번에 제가 직면한 문제는 “각 상황에 따라서 SVG 아이콘의 색상을 어떻게 변경 할 것인가” 입니다.

일단 코드 형태로된 SVG 아이콘의 색상은 CSS 에서 fill 속성을 지정해 변경 할 수 있습니다.

<style>
    svg { fill: red; }
</style>
...
<svg>...</svg>

이렇게 하면 SVG 아이콘의 색상을 빨간색으로 변경 할 수 있죠. 헷갈리는게 마치 CSS 에서 color 속성을 지정하면 원하는 색상으로 변경 할 수 있을 것 같지만, fill 속성에 색상을 지정해줘야 한다는 점을 잊지 맙시다.

우리는 보통 웹사이트에서 사용자 편의를 위해 일반적인 문자와 링크를 색상으로 구분합니다. 하얀 바탕에 글자는 검은색으로 링크는 파란색으로 구분해서 표시하는거죠.

그렇다면 링크가 SVG 아이콘으로 되어 있다면 어떻게 될까요.

<style>
    p { color: gray; }
    a { color: blue; }
</style>
...
<p>
    ...
    <svg>...</svg>
        <a href="...">
            <svg>...</svg>
        </a>
    ...
</p>

위 상황은 p 태그로 구현된 일반적인 문장은 gray 색상으로 표시 되고, 그 속에 있는 a 태그로 표시된 링크는 blue 색상으로 표시가 되어야 겠죠?

하지만 앞에서도 이야기 했듯이, p 태그와 a 태그 내부에 있는 SVG 아이콘의 색상은 color 속성의 영향을 받지 않기 때문에, 코드상에서 설정된(보통은 검은색) 색상으로 표시가 될 것입니다.

이런 상황에서 각 SVG 아이콘의 색상을 상황에 맞게 설정하기 위해서는

<style>
    p { color: gray; }
    a { color: blue; }
    p svg { fill: gray; }
    a svg { fill: blue; }
</style>

이렇게 설정해줘야 원하는 결과가 나옵니다.

그런데 만약 p 또는 a 코드 뿐만 아니라 span, h2, h3 등 수많은 코드를 적용해야 하는 상황이라면? 별 것도 아닌 작업에 엄청나게 많은 스타일 코드를 작성해야겠죠?

이런 불편한 작업을 방지 하기 위해 우리는 아래와 같이 스타일을 적용할 수 있습니다.

<style>
    p { color: gray; }
    a { color: blue; }
    svg { fill: currentColor; }
</style>

이렇게만 해둔다면 SVG 아이콘의 색상은 부모 요소의 color 속성에 설정된 색상을 가져와 표시되게 할 수 있습니다.

코드 길이도 짧아지고, 색상을 수정해야 할 때도 매우 간편해지겠네요.

끝.