CSS로 SVG 요소 스타일하기

지난 포스팅에서는 HTML 문서에 SVG로 다양한 그림을 그리는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 HTML 문서에 삽입된 SVG 요소를 CSS로 스타일하는 방법에 대해서 알아보겠습니다.

SVG 요소

우선 스타일할 SVG 요소가 있어야겠죠? 아래 SVG 요소는 로그인이 필요한 웹사이트에서 흔히 볼 수 있는 사용자 아이콘인데요. 이 요소를 상대로 간단한 실습을 해보려고 합니다.

<svg
  viewBox="0 0 24 24"
  width="24"
  height="24"
  stroke="currentColor"
  stroke-width="2"
  fill="none"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
  <circle cx="12" cy="7" r="4"></circle>
</svg>

크기 조정

위의 사용자 아이콘이 너무 작은 것 같은데요. 먼저 크기를 좀 키워볼까요?

SVG 요소를 크기를 조정할 때는 viewBox 속성을 고려하는 것이 중요한데요. 이 사용자 아이콘의 경우, viewBox 속성이 0 0 24 24로 설정되어 있기 때문에, 캔버스 상에서 너비와 높이가 각각 24로 1:1 비율을 가지고 있습니다.

SVG 요소의 viewBox 속성에 대한 자세한 설명은 관련 포스팅을 참고바랍니다.

SVG 요소의 너비와 높이를 조정해줄 때는 이 viewBox 속성에 명시된 원래 비율을 깨뜨리지 않도록 주의해야합니다. 이 가로 세로 비율이 깨지게 되면 SVG 요소 내에 불필요한 공백이 생기기 때문입니다.

그럼 width와 height 속성을 이용해서 너비와 높이를 10배씩 늘려보겠습니다.

svg {
  width: 240px;
  height: 240px;
}

면색 조정

아이콘에서 한번 사용자의 얼굴 색을 바꿔보면 어떨까요?

도형의 면과 관련하여 SVG에는 fill로 시작하는 다양한 속성이 있는데요. 본 실습에서는 fill과 fill-opacity 속성만을 사용해보겠습니다.

이 두 개의 속성을 추가하여 사용자의 얼굴 색을 살짝 핑크톤으로 바꿔보겠습니다.

circle {
  fill: hotpink;
  fill-opacity: 0.5;
}

선색 조정

이번에는 아이콘에서 사용자의 몸 색을 바꿔볼까요?

stroke 속성으로 선의 색을 지정해주고, stroke-width 속성으로 선의 두께를 지정해줍니다. 이 밖에도 SVG에는 stroke로 시작하는 다양한 속성이 있으며 도형의 선을 스타일할 때 사용할 수 있습니다.

path {
  stroke: purple;
  stroke-width: 3;
}

기타 조정

SVG 요소를 상대로 fill이나 stroke처럼 SVG에 특화된 속성 뿐만 아니라 대부분의 일반 CSS 속성도 사용할 수 있습니다.

예를 들어, 사용자 아이콘의 배경색을 하늘색으로 바꾸고 테두리를 둥글게 해줄까요?

svg {
  background: skyblue;
  border-radius: 50%;
}

마치면서

지금까지 SVG 요소를 함께 스타일하면서 자주 사용되는 CSS 속성에 대해서 살펴보았습니다. 웹에서 SVG를 활용하는데 본 포스팅이 조금이나마 도움이 되었으면 좋겠습니다.