본문 바로가기

DEV/SVG

[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 아이콘을 배경이미지화 해서 더욱 다양하게 쓰고 싶다면 아래 참고 링크가 도움이 될 것 입니다. 다양한 아이콘 이제 이미지 파일 대신 코드로 사용해보는건 어떨까요?

 

 

 


참고

 

추천글

 

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

프롤로그 시안 상에 얼핏 보기에는 비슷한 꺽쇄 아이콘이 여러 개가 있습니다. 하지만 자세히 살펴보면... 서로 색도 미묘하게 다르고 크기도 달라요..!! 이걸 표현하려면 총 세 개의 이미지가 필

nykim.work

 

반응형