2019년 10월 11일 금요일 @W3C HTML5 Conference SVG를 배경이미지로 활용한 아이콘 삽질기 - 코인원 오혜진 발표자료입니다.

1. @zineeworld
SVG를
배경이미지로 활용한
아이콘 삽질기
코인원 오혜진

2. @zineeworld
오늘 이야기 하고 싶은 것
1. 아이콘 폰트에 대한 소개
2. CSS로 그린 간단한 아이콘
3. background-image: url(‘SVG 코드’)

3. @zineeworld
아이콘 폰트란?

4. @zineeworld
쉽게 생각하면
Bootstrap Glyphicon,
Font Awesome
참고 : https://webdir.tistory.com/476

5. @zineeworld
Bootstrap Glyphicons Font Awesome

6. @zineeworld
아이콘 폰트의 장점
1. 클래스명으로 쉽게 아이콘을 불러올 수 있다.
2. 벡터 그래픽을 이용하기 때문에 사이즈 변경이 용이하다.
3. 일반 텍스트에 적용할 수 있는 CSS를 사용할 수 있다.

7. @zineeworld
코인원 아이콘폰트 제작
https://icomoon.io/
SVG 파일로 추출된 아이콘들을 icomoon 사이트를 통해 아이콘폰트로 제작합니다.
코인원에서는 디자이너님께서 해당 작업을 해주고 계십니다.

8. @zineeworld
개편 작업으로 할당받은
페이지 새 디자인

9. @zineeworld

10. @zineeworld
페이지 내에 반복적으로 링크 연결되는 부분에 > 아이콘이 사용
기존 아이콘폰트를 사용해왔던 방식 그대로 <span class=“glyph-ui-chevron-right”></span>을 적어준다.
적용방법
반복적으로 적어주지 않고
좀 더 단순하고 쉽게 사용할 수는 없을까?

11. @zineeworld
아이콘폰트는 개체마다 고유의 유니코드 값을 가지고 있다
접근1) 아이콘폰트의 유니코드 값을 똑같이 적어주자

12. @zineeworld
아이콘폰트는 개체마다 고유의 유니코드 값을 가지고 있다
접근1) 아이콘폰트의 유니코드 값을 똑같이 적어주자

13. @zineeworld
아이콘폰트는 개체마다 고유의 유니코드 값을 가지고 있다
(문제점)
유니코드 값을 매번 보장 할 수 없다
접근1) 아이콘폰트의 유니코드 값을 똑같이 적어주자

14. @zineeworld
접근2) CSS로 그려볼까?
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(-45deg);
https://codepen.io/zineeworld/pen/ZPxpgp

15. @zineeworld
접근2) CSS로 그려볼까?
https://codepen.io/zineeworld/pen/PLLydw
(문제점)
결과물 디테일 차이
1px 1.5px 2px

16. @zineeworld
접근3) SVG 코드를 활용 해볼까?
1. <img src=“icon.svg”> 이미지 파일로 사용한다.
1. 벡터 이미지여서 크기에는 제약이 없으나 색상을 변경하려면 다른 파일이 필요하다.
2. HTML 코드 안에 <svg ~~~~></svg> 를 넣는다.
1. 1번 방법보다는 하나의 코드로 색상 값을 변경하기는 용이하다. (fill=“color값”)
2. <span class=“glyph-ui-chevron-right”></span> 보다 훨-씬 더 긴 코드를 매번 넣어야 한다.
3. svg 코드에 변경이 생기면 사용하고 있는 모든 곳을 찾아 바꿔줘야 한다.
4. 아이콘 색상을 컨트롤 하는 건 스타일 파일로 통일되어야 하는데,
이 방식을 쓰면 html 코드 상의 수정이 필요하다.
3. CSS로 배경이미지 속성에 svg 코드를 넣는다.
1. background-image: url(data:image/svg+xml, svg코드);
2. 색상 관리를 스타일 파일 한 곳에서 제어가 가능하다.
SVG 아이콘을 사용하는 방법

17. @zineeworld
접근3) SVG 코드를 활용 해볼까?
1.SVG 코드를 background-image 에 넣기
1. IE 대응을 위해 SVG 코드를 Data URI 로 변환하기
2. 변환한 Data URI 값을 배경이미지에 넣기
2.Sass를 통해 색상 변환이 용이한 function 만들기
1. Data URI 에는 hex 값을 넣을 수 없다?
2. rgba의 알파값에 0.999를 주자
3.SVG 코드를 배경이미지로 활용한 아이콘 완성!

18. @zineeworld
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 60 60">
<polygon 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">
</svg>
SVG 코드를 살펴볼까요?
단순한 폴리곤으로 이루어져 있습니다.
접근3) SVG 코드를 활용 해볼까?

19. @zineeworld
.icon
display: inline-block
width: 1em
height: 1em
background: url("data:image/svg+xml,<svg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0
60 60'><polygon fill='rgba(23, 114, 248,
0.999)' 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'/></svg>") no-repeat
Sass) background-image: url() 에 SVG 코드를 넣어봅시다.
이렇게 해도 대부분의 브라우저에서는 동작하지만 IE 에서는 뜨지 않습니다.
접근3) SVG 코드를 활용 해볼까?

20. @zineeworld
접근3) SVG 코드를 활용 해볼까?
https://zineeworld.github.io/demo/svg_fonticon_test.html
Windows (좌측 상단부터 시계방향으로 크롬 >> 파이어폭스 >> Edge >> IE11)
MacOS (좌측부터 크롬 >> 사파리 >> 파이어폭스)
IE에서는 Data URI로
변환해서 넣은 코드만 정상 노출됨
> : Data URI
> : SVG

21. @zineeworld
SVG → Data URI 변환 방법
접근3) SVG 코드를 활용 해볼까?
https://runkit.com/zineeworld/convert-svg-to-data-uri

22. @zineeworld
접근3) SVG 코드를 활용 해볼까?
.icon
display: inline-block
width: 1em
height: 1em
background: url(“data:image/
svg+xml,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) background-image: url() 에 변환한 Data URI 코드를 넣어봅시다.

23. @zineeworld
접근3) SVG 코드를 활용 해볼까?
@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
Sass를 통해 색상 변환이 용이한 function 만들기

24. @zineeworld
접근3) SVG 코드를 활용 해볼까?
@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
Sass를 통해 색상 변환이 용이한 function 만들기
(문제점)
fill 값에는 hex 코드를 넣을 수 없다!!

25. @zineeworld
접근3) SVG 코드를 활용 해볼까?
@function svgIcon($color)
$color: rgba($color, 1.0)
$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
Sass를 통해 색상 변환이 용이한 function 만들기
<<< 이렇게 하면 될 줄 알았으나 또 안 됨…

26. @zineeworld
접근3) SVG 코드를 활용 해볼까?
@function svgIcon($color)
$color: rgba($color, 1.0)
$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
Sass를 통해 색상 변환이 용이한 function 만들기
(문제점)
rgba(#ffffff, 1.0) = #ffffff
rgba(#ffffff, 1.0) != rgba(255,255,255,1.0)

27. @zineeworld
접근3) SVG 코드를 활용 해볼까?
그렇다면 알파값에 0.999를 주면 어떨까?
일단 디스플레이 되는 결과값은 오차가 없음을 확인!

28. @zineeworld
접근3) SVG 코드를 활용 해볼까?
@function svgIcon($color)
$color: rgba($color, 0.999)
$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
Sass를 통해 색상 변환이 용이한 function 만들기
드디어 완성!

29. @zineeworld
접근3) SVG 코드를 활용 해볼까?
@function svgIcon($color)
$color: rgba($color, 0.999)
$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(#000000) no-repeat
Sass를 통해 색상 변환이 용이한 function 만들기
hover시 변경색은 이렇게 지정
// SVG 코드가 background-image 값으로 들어간 경우 currentColor 사용불가
// fill='currentColor' 라고 적히나 동작하지 않음, 단순 문자열이 되어버림

30. @zineeworldhttps://codepen.io/zineeworld/pen/XGYNZp

31. @zineeworld
• https://medium.com/coinone-official/svg%EB%A5%BC-
%EB%B0%B0%EA%B2%BD%EC%9D%B4%EB%AF%B8%EC%A7%80
%EB%A1%9C-%ED%99%9C%EC%9A%A9%ED%95%9C-
%EC%95%84%EC%9D%B4%EC%BD%98-
%EC%82%AC%EC%9A%A9%EA%B8%B0-d46e681b492f
• 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
참고자료

32. @zineeworld
감사합니다
facebook.com/zineeworld