Logo

CSS에서 SVG 이미지를 배경으로 사용하기

이번 포스팅에서는 CSS에서 SVG 이미지를 배경으로 사용하는 방법을 간단한 실십을 통해 알아보겠습니다.

실습 시작 코드

HTML로 <div> 요소 3개를 만들고, 2번째 <div> 요소와 3번째 <div> 요소의 클래스를 각각 check와 heart로 설정해주겠습니다.

<div>TEXT</div>
<div class="check">CHECK</div>
<div class="heart">HEART</div>

CSS로는 글꼴 크기와 배경색과 같은 기본 스타일링을 해주었으며, SVG 이미지가 보일 자리를 확보하기 위해서 좌측 여백을 좀 크게 주었습니다.

div {
  font-size: 3rem;
  padding-left: 4rem;
  margin: 1rem;
  background-color: ghostwhite;
}

이제부터 check와 heart 클래스에 스타일을 추가하여 2번째 <div> 요소와 3번째 <div> 요소 앞에 각각 체크 모양과 하트 모양의 SVG 이미지가 나타나게 할 것입니다.

HTTP URL로 원격 SVG 내려받기

보통 이미지를 배경으로 사용해야할 때는 CSS의 background-image 속성을 사용하죠? SVG 이미지라고 크게 다를 것은 없습니다. url() 함수의 인자로 해당 이미지의 주소를 넘겨주면 됩니다.

background-image: url("https://...");

예를 들어, 인터넷에 공개된 SVGBox라는 서비스로 부터 체크 모양과 하트 모양 SVG 이미지를 내려받아 check와 heart 클래스를 대상으로 사용해보겠습니다.

.check {
  background-image: url("https://s2.svgbox.net/octicons.svg?ic=check");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
}

.heart {
  background-image: url("https://s2.svgbox.net/hero-solid.svg?ic=heart");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
}

예제에서 사용된 background-repeat, background-position, background-size와 같은 배경과 관련된 CSS 속성에 대해서는 별도의 포스팅에서 자세히 다루었으니 참고 바랍니다.

이제 2번째 <div> 요소와 3번째 <div> 요소 앞에 각각 체크 모양과 하트 모양의 SVG 이미지가 나타나는 것을 볼 수 있습니다.

Data URI로 SVG 코드 삽입하기

위와 같이 브라우저가 HTTP를 통해서 원격에 있는 SVG 이미지를 내려받는 과정은 비효율적인 측면이 있는데요. HTTP URL 대신에 Data URI를 사용하면 CSS의 url() 함수에 SVG 코드를 있는 그대로 넘길 수 있습니다. 이 방법을 사용하면 네트워크를 통해 이미지를 내려받지 않아도 되기 때문에 성능 측면에서 이점이 있습니다.

Data URI를 사용할 때는 SVG 코드가 시작하기 전에 data:image/svg+xml;utf8,를 반드시 붙어주셔야 합니다.

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ...>....</svg>');

Data URI를 사용하면 fill이나 stroke처럼 SVG에 특화된 속성을 사용하여 이미지 내의 도형의 색상을 직접 제어할 수도 있습니다.

HTML에서 fill이나 stroke처럼 SVG에 특화된 속성에 대해서는 관련 포스팅을 참고 바랍니다.

예를 들어, 체크 모양 아미지의 색상을 초록색으로 설정하고, 하트 모양 이미지 색상을 빨간색으로 지정해보겠습니다.

.check {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="green"><path fill-rule="evenodd" d="M21.03 5.72a.75.75 0 010 1.06l-11.5 11.5a.75.75 0 01-1.072-.012l-5.5-5.75a.75.75 0 111.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 011.06 0z"/></svg>');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
}

.heart {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" color="red"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/></svg>');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
}

이제 SVG 이미지의 색상이 바뀐 것을 확인하실 수 있으실 겁니다.

원격에서 내려받은 SVG의 색상 바꾸기

만약에 Data URI를 사용하지 않고 원격에서 내려받은 SVG 이미지의 색상을 바꿔야한다면 어떻게 해야할까요? 이 때는 상당히 골치가 아파질 수 있는데요.

여러 가지 접근법이 있겠지만 background-image 속성 대신에 mask-image 속성을 사용하는 것을 고려해볼 수 있습니다. ::before 의사 요소(pseudo element)에 background-color 속성으로 원하는 색상을 설정해주면 마치 SVG 이미지가 색상이 바뀐듯한 효과를 낼 수 있습니다.

div {
  /* 생략 */
  position: relative;
}

.check::before {
  position: absolute;
  left: 0;
  content: "";
  width: 3rem;
  height: 3rem;
  background-color: green;
  mask-image: url("https://s2.svgbox.net/octicons.svg?ic=check");
  mask-repeat: no-repeat;
  mask-position: center left;
  mask-size: contain;
}

.heart::before {
  position: absolute;
  left: 0;
  content: "";
  width: 3rem;
  height: 3rem;
  background-color: red;
  mask-image: url("https://s2.svgbox.net/hero-solid.svg?ic=heart");
  mask-repeat: no-repeat;
  mask-position: center left;
  mask-size: contain;
}

마치면서

이상으로 CSS에서 SVG 이미지를 배경으로 사용하는 몇 가지 방법에 대해서 알아보았습니다. 웹에서 SVG를 활용하는데 본 포스팅이 조금이나마 도움이 되었으면 좋겠습니다.

This work is licensed under CC BY 4.0

messageCircle