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

 

 

프롤로그

 

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

 

스프라이트로 저장해서 사용하는 방법도 있긴 하지만, 만약 수정사항이 생기면 어떨까요?

 

 

 

이렇게 형태는 같지만 크기가 더 크고 색이 다른 아이콘이 필요해졌다고 해봅시다.
스프라이트 이미지를 가져다 쓰려고 해도 기존 거는 크기랑 색이 달라서 대응할 수가 없..죠......ㅠ_ㅠ

 

만약 저 아이콘이 픽셀이 아니라 코드라면 수정하기 참 편할 텐데요!

그럼 필요할 때마다 이미지의 색상 값과 크기 값을 변경해서 사용할 수도 있을 거고요.

 

 

 

이럴 때 필요한 게 바로 S.V.G 입니다 😎
얘는 벡터 그래픽이라 다양한 크기로 표현할 수 있고, 코드이기 때문에 색상값을 필요할 때마다 달리 줄 수도 있습니다.

SVG를 백그라운드 이미지로 넣으면 이미지 파일 없이도 멋진 아이콘을 보여줄 수 있습니다.

 

그럼 이렇게 보여지게 됩니다 :)

이 스킨에서도 SVG를 활용해 아이콘을 표시하고 있어요!

 

---

 

 

SVG 준비하기

SVG란?

SVG(Scalable Vector Graphics)는 '벡터 그래픽'을 표현하기 위한 XML 기반의 포맷입니다.
JPEG, PNG 등 픽셀 기반 이미지와 다르게 SVG는 '읽을 수 있는 코드'이므로 정보 접근성이 좋습니다.
게다가 필요할 땐 코드를 수정하여 이미지를 수정할 수도 있어요! 

대신 (당연하게도) IE에서 몇 가지 지원 이슈가 있긴 한데요, 
여기서는 단순히 백그라운드 이미지 아이콘으로 사용하며 IE9까지만 대응합니다.

 

SVG 가져오기

SVG는 벡터 편집 프로그램(Adobe Illustrator 등)을 통해 만들 수 있지만 여기선 완료된 디자인을 전달받았다고 가정합니다.

포토샵의 경우 벡터 도형(path, shape)으로 되어있다면 레이어 우클릭 - SVG 복사로 코드를 가져올 수 있습니다.
하지만 색상 오버레이 같은 옵션을 준 경우 불필요한 필터가 붙기도 하고, 벡터가 아닌 래스터화된 도형은 가져올 수 없기 때문에 주의해야 합니다.

 

 

Zeplin을 사용 중이라면 아이콘 클릭 후 우측 패널에서 SVG를 내려받을 수 있습니다. (편-안)

 

 

테스트용 SVG 아이콘이 필요하다면, flaticon에서 무료로 배포하고 있으므로 여기서 다운로드 받으셔도 좋겠습니다.

 

우측 SVG 버튼을 눌러 다운로드 받을 수 있어요

 

 

 

SVG 사용하기

SVG는 <img>, <embed>, <object>, <iframe>, <svg> 형태로 HTML 문서에 표현할 수 있습니다.

여기선 CSS 내 백그라운드 이미지로서 사용해 보겠습니다.

 

 

 

1) 압축하기

우선 다운받은 SVG를 코드 편집기에서 열어 봅니다.

 

 

여기서 DTD, version, xmlns등은 반드시 필요한 속성은 아니므로 쓱- 걷어내서 코드를 줄여 줍니다. 

 

 

SVG 압축 도구도 엄청 많지만, 저는 웹 SVGOMG를 통해 압축하곤 해요.

Paste markup 클릭해 SVG 코드를 붙여넣으면 아래와 같이 압축을 해줍니다 (따란)

 

압축된 파일을 다운로드 받거나 복사해서 다시 편집기로 열어보면 꼭 필요한 코드만 남은 걸 볼 수 있습니다.

 

깔-끔 ✧

 

2) Data URI로 변환하기

이제 SVG 코드를 'Data URI'라는 형태로 변환할 차례입니다. 🪄🎩

 

Data URI는 data: 스킴으로 시작되는 URL로, 작은 파일을 인라인으로 임베드할 수 있습니다. 이렇게 임베드된 데이터에는 HTTP 요청 및 헤더 트래픽이 필요하지 않습니다.
data:[<mediatype>][;base64],<data> 형태로 사용합니다.

 

Base 64 ?

Base 64는 이진(바이너리) 데이터를 인코딩 영향을 받지 않는 안전한 ASCII 영역의 문자열로 인코딩하는 과정입니다.

(이하 대충 설명하는 글) 

예를 들면, Nana라는 문자열은 ASCII로 78, 97, 110, 97로 치환됩니다.
이를 8비트로 표현하면 01001110, 01100001, 01101110, 01100001입니다.
이걸 6비트씩 다시 쪼갠다면 010011, 100110, 000101, 101110, 011000, 01이 됩니다. 아, 마지막 01은 길이가 좀 모자르니까 0으로 채워서 010000로 만들어 줍니다.
이걸 다시 십진수로 바꾸면 19, 38, 5, 46, 24, 16이 되는데, base64 색인표를 참고하면 이는 T, m, F, u, Y, Q입니다.
마지막 애는 0으로 땜빵한 거였으니 인코딩할 때는 ==로 패딩을 추가합니다.
이렇게 Nana는 베이스육십사를 거쳐 TmFuYQ==가 됩니다 ;) 

참고글: https://arabiannight.tistory.com/159

요점은 이미지를 뭔가 길고 복잡한 문자열로 바꿔서 넣어줘야 한다는 것입니다.
어쨌든 이미지도 데이터니까, 이 긴~~ 문자를 써서 이미지를 표현해낼 수 있습니다.

사실 SVG뿐만 아니라 JPEG나 PNG도 Base 64 인코딩을 거쳐 Data URI로 제공할 수 있어요!

 

다만 Data URI로 변환하는 경우, 인코딩 과정에서 크기가 기존보다 커지게 됩니다. (6bit당 2bit의 오버헤드 발생)
또한 Data URI는 캐싱이 되지 않습니다. Base 64로 인코딩된 데이터일 뿐 단순 텍스트나 마찬가지기 때문에, HTML이나 CSS가 요청될 때마다 다운로드받게 됩니다.

 

하지만 아이콘은 크기도 워낙 작고 재사용할 일도 많기 때문에, 이미지를 여러번 요청해서 받아오는 대신 Data URI로 넣어 사용해도 괜찮을 것 같아요.
판단에 따라 적절히 사용하기 나름!

 

SVG 이미지를 넣는다면 "data:image/svg+xml;utf8,{여기에 SVG코드}"와 같이 사용하면 됩니다.
이제 이걸 CSS 내에서 background-image: url() 안에 넣어 사용하면 되겠네요.

 

 

SVG 코드를 바로 Data URI로 바꿔주는 URL-encoder for SVG를 통해 URI 값을 얻을 수 있어요.

 

 

그리고 이제 이걸 CSS에 넣으면? 예쁘게 잘 나옵니다 ;)

 

See the Pen SVG Background Image (1) by nanalike (@nykim_) on CodePen.

 

 

 

 

 

3) 특수문자 제외하기

그런데 한 가지 신경쓰이는 게... URL-encoder를 통해 나온 코드는 기존의 SVG 코드랑 살짝 달라 보입니다.
#aaaaaa가 아닌 %23aaaaaa으로 바뀌었고, < 대신 %3C로 시작하고 있습니다.

 

 

이는 퍼센트 인코딩(URL에 문자를 표현하는 문자 인코딩 방법)인데, 해시 마크(#)는 URI fragment 식별자와 혼동될 수 있기 때문에 안전하게 바꿔주는 것이 좋습니다.
마찬가지로 < 는 %3C 로, > 는 %3E 로 치환해 사용합니다. 또, utf8로 캐릭터셋을 지정해 줍니다.

 

background-image: url("data:image/svg+xml;charset=utf8,{SVG코드}");

사실 #, < 문자를 사용하고 캐릭터셋을 지정하지 않아도 되긴 하지만 IE에서 제대로 보이지 않습니다.
크로스 브라우징을 고려한다면 이런 부분까지 인코딩하는 것이 좋겠죠!

그럼 IE9에서도 잘 보입니다.

 

 

 

 

 

 

4) 색상값 파악하기

이제 SVG의 장점을 십분 활용해 볼 차례입니다! 필요할 때마다 아이콘의 색상을 바꿔 보겠습니다.

그러려면 이 코드의 어딘가를 변경해야 하는데... 아이콘 정도면 SVG가 그리 복잡하지 않아 바로 발견할 수 있습니다.

 

테스트로 가져온 SVG에는 별도의 색상값이 없기 때문에 임의로 fill="#000000"을 넣어주었습니다.

여기서도 # 대신 %23으로 퍼센트 인코딩을 해줘서 fill="%2300000"으로 사용합니다.

 

 

 

그리고 SASS의 변수 기능을 사용합니다.
아까 컬러값이었던 부분을 %23#{$color}으로 바꿔줍니다.
이제 이 변수에 원하는 값을 넣어 색을 뙇 바꿀 수 있어요!

 

See the Pen SVG Background Image (2) by nanalike (@nykim_) on CodePen.

 

 

 

 

 

 

5) 함수화 하기

SASS의 강점인 함수를 활용한다면 사용성을 더욱 높일 수 있습니다.

아이콘 목록을 변수화하고, 함수의 파라미터로 아이콘 이름과 색상을 받아오면 아주 편합니다. 바로 이렇게요!

 

@function icon($iconName, $color:555555) {
    $iconList: ( 
        check: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.867 477.867'%3E%3Cpath fill='%23#{$color}' d='M238.933 0C106.974 0 0 106.974 0 238.933s106.974 238.933 238.933 238.933 238.933-106.974 238.933-238.933C477.726 107.033 370.834.141 238.933 0zm0 443.733c-113.108 0-204.8-91.692-204.8-204.8s91.692-204.8 204.8-204.8 204.8 91.692 204.8 204.8c-.122 113.058-91.742 204.678-204.8 204.8z'/%3E%3Cpath fill='%23#{$color}' d='M370.046 141.534c-6.614-6.388-17.099-6.388-23.712 0l-158.601 158.6-56.201-56.201c-6.548-6.78-17.353-6.967-24.132-.419-6.78 6.548-6.967 17.353-.419 24.132.137.142.277.282.419.419l68.267 68.267c6.664 6.663 17.468 6.663 24.132 0l170.667-170.667c6.548-6.779 6.36-17.583-.42-24.131z'/%3E%3C/svg%3E"
    );
  $icon: map-get($iconList, $iconName);
  @return url("data:image/svg+xml;charset=utf8,#{$icon}");
}

.icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	
	&.check {
		background-image: icon(check);
	}
}

 

See the Pen SVG Background Image (3) by nanalike (@nykim_) on CodePen.

 

이런 식으로 다양하게 응용해 돌려쓸 수 있습니다 :-D

 

 

 

---

 

 

정리

SVG는 코드인만큼 응용한다면 색상이나 선 굵기가 바뀌는 걸 넘어 다양한 인터렉션을 줄 수 있을 것 같습니다.
물론 Base 64로 인코딩해야 하고, 코드만 봐서는 이게 무슨 이미지인지 알 수 없다는 단점도 존재합니다.
그래도 아이콘은 크기가 작고 바뀔 가능성이 적으며 여기저기 자주 사용되는 만큼, SVG로 활용하기에 좋은 대상인 것 같아요.