[SVG] background-image에 SVG를 넣어 사용하기 (업데이트 21.04.15)

1. SVG 코드를 활용할 순 없을까?

See the Pen gyrqYe by zinee (@zineeworld) on CodePen.

 

 

 

2. SVG 코드를 Data URI로 변환하기

검정색 아이콘이 SVG의 Data URI 값을 넣은 것이고, 파란색이 SVG 코드를 그대로 넣은 것입니다. IE 에서는 background-image 에 <svg> 코드를 넣으면 보이지 않는 다는 것을 확인했습니다. 아래 주소를 각 브라우저에 띄워 확인해 보실 수 있습니다. https://zineeworld.github.io/demo/svg_fonticon_test.html

 

Windows (좌측 상단부터 시계방향으로 크롬 >> 파이어폭스 >> Edge >> IE11)                       MacOS (왼쪽부터 크롬 >> 사파리 >> 파이어폭스)

 

<, > 을 주로 변환하는 단순한 작업이지만 아래 사이트를 이용하면 빠르고 쉽게 변환이 가능합니다. (2021/04/15 수정)

 

 

위 사이트를 통해 SVG 코드를 Data-URI 값으로 변환했다면 # → %23 인코딩이 바로 되어서 나오는데, 첫 변환 코드를 fill="black"으로 시작해서 # 처리 방법을 몰라서 한참을 헤맸네요. [더보기]를 누르시면 그 삽질기가 담겨있습니다 ^^;

 

fill="black"으로 첫 테스트를 시작해서 fill="#000" 처리방법에서 한참 헤맨 이야기

 

변환한 Data URI 값을 배경이미지에 넣기

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='black' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/%3E%3C/svg%3E") no-repeat;
}

 

Sass를 통해 색상 변환하기

@function svgIcon($color){
  $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/%3E%3C/svg%3E";
  @return url($icon);
 }
 
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: svgIcon(#1772f8) no-repeat;
}

- 음... 뭐가 문제지? 왜 안보이지?

 

Data URI 값도 잘 넣었는데 화면엔 아무것도 안보였습니다. fill="black", fill="red" 등으로 테스트할 때도 잘 나왔습니다. 그런데 hex 코드로 바꾸니 아무것도 보이지 않았습니다.

 

 

신 해결방법) Data URI값에는 hex 코드를 넣을 수 없다.

hex코드에서 문제를 일으키는 범인은 바로 '#' 였는데, 저는 rgba값으로 치환할 생각부터 했던 것 같습니다. haksoo님의 제보로 좀 더 간결하게 해결하는 방법을 알게 되었습니다. 감사합니다!

 

haksoo님의 제보! 감사합니다 (_ _)

 

https://ko.rakko.tools/tools/89/

구 문제점) Data URI값에는 hex 코드를 넣을 수 없다.

hex 색상을 매번 어떻게 rgb로 변환할 수 있을 까 생각하다가 이미 자주 사용했던 rgba() 속성을 생각했습니다. rgba($color, 1.0) 을 넣고 야심차게 실행해봤지만 화면엔 아무것도 나타나지 않았습니다. 뭐가 문제지? 하고 한참을 생각하다가 opacity: 1.0 은 rgb값으로 리턴되지 않고 자동으로 hex값이 된다는 걸 발견했습니다. rgba()를 사용했지만 결국 hex 코드를 넣고 있었던 것이었습니다.

(좌) opacity: 0.999 / (우) opacity: 1.0

 

구 해결방법) rgba의 알파값에 0.999를 주자.

실제 색상과의 0.01%의 오차는 hex코드로 변환시 결국 같은 값이 됨을 확인 했습니다. 

https://codepen.io/zineeworld/pen/draKax

3. SVG 코드를 배경이미지로 활용한 아이콘 완성!

@function svgIcon($color){
  $color: '%23'+$color;
  $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/%3E%3C/svg%3E";
  @return url($icon);
}
 
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: svgIcon(1772f8) no-repeatat;
}

CSS로 그렸을 때의 장점은 border-color를 폰트색상과 동일하게 currentColor로 상속받을 수 있는 것입니다. SVG 코드를 html에 넣고 fill 색상에 currentColor를 지정해서 부모요소의 폰트색상을 상속시키는 것은 가능합니다. 하지만 SVG 코드는 배경이미지 속성에 넣을 경우에는 fill 값에 부모요소의 색상을 동적으로 적용시킬 수 없습니다. 왜냐하면 url() 안에 들어가는 값은 문자열이기 때문입니다.

// SVG 코드가 html에 들어간 경우 currentColor 사용가능
fill: currentColor
 
// SVG 코드가 background-image 값으로 들어간 경우 currentColor 사용불가
// fill='currentColor' 라고 적히나 동작하지 않음, 단순 문자열이 되어버림
background-image: url("data:image/svg+xml,%3Csvg xmlns='<http://www.w3.org/2000/svg>' viewBox='0 0 60 60'%3E%3Cpolygon fill='currentColor' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/%3E%3C/svg%3E")

 

글자색과 아이콘 색상을 동일하게 맞춰주는 작업이 필요합니다. hover시 색상이 변하는 경우는 아래와 같이 처리할 수 있습니다.

@function svgIcon($color) {
  $color: '%23'+$color;
  $icon: "data:image/svg+xml,%3Csvg xmlns='<http://www.w3.org/2000/svg>' viewBox='0 0 60 60'%3E%3Cpolygon fill='#{$color}' points='20.62 55.62 45.74 30.5 20.62 5.38 16.38 9.62 37.26 30.5 16.38 51.38 20.62 55.62'/%3E%3C/svg%3E";
  @return url($icon);
}
 
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: svgIcon(1772f8) no-repeat;
  &:hover {
    background: svgIcon(03308f) no-repeat;
  }
}

 

See the Pen [SASS] SVG background-image by zinee (@zineeworld) on CodePen.

 

 

 

이로써, 디자인 의도를 해치지 않으면서 코드로 아이콘을 사용할 수 있는 방법에 대해 알아봤습니다. SVG 아이콘을 배경이미지화 해서 더욱 다양하게 쓰고 싶다면 아래 참고 링크가 도움이 될 것 입니다. 다양한 아이콘 이제 이미지 파일 대신 코드로 사용해보는건 어떨까요?

 

 

 

---

참고

• https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
• https://codepen.io/noahblon/pen/xGbXdV?editors=1100
• https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

 

추천글

• nykim.work/95

SVG 아이콘 백그라운드 이미지로 활용하기