[CSS / Fimga / ai ] <input> 요소에 SVG 아이콘 넣기 ( SVG 아이콘 data URL로 CSS 처리하기 )

SVG에 관한 내용은 다음을 참고바랍니다. SVG란?(링크)  

 

1. 기존 SVG로 아이콘을 적용시키던 방법

아이콘을 SVG로 만들어 사용하는 여러 방법이 있지만 오늘은 CSS의 background-image 속성을 사용하여 적용시키는 법을 얘기하려고합니다.

기존에는 메뉴등에 들어가는 작은 크기의 아이콘들은 svg로 만들어 html에 삽입하여 사용하거나, 이미지들은 스프라이트 형식으로 바꿔 만들어 img로 사용했는데요.

반응형 등의 크기 적용이 어렵고 매번 svg의 위치와 형태를 잡기위해 래퍼(wrapper)요소가 필요하다는 번거로움이 있었습니다. 

그러다 background-image로 아이콘을 적용시키는 방식을 선택하니 생각보다 정말 편하고 다른 곳에 적용시키기도 수월해 이후 간단한 아이콘들은 전부 이 방식을 사용하고 있습니다.

 

2. background-image 로 아이콘 적용 방법

2-1) SVG 데이터 인코딩

CSS 에 <svg> 요소를 넣을 때는 data URL 형식으로 전환시켜 넣어야합니다.

예를들어, 아래와 같은 SVG 아이콘의 데이터코드가 있다고 가정했을때,

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" fill="none">
	<rect x="2" y="4" width="7" height="2" transform="rotate(90 2 4)" fill="#868E96"/>
	<rect x="6" width="11" height="2" transform="rotate(90 6 0)" fill="#868E96"/>
	<rect x="10" y="4" width="7" height="2" transform="rotate(90 10 4)" fill="#868E96"/>
</svg>

 

아래와 같이 data 형태로 인코딩된 상태로만 사용이 가능합니다.

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%20fill%3D%22none%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%227%22%20height%3D%222%22%20transform%3D%22rotate(90%202%204)%22%20fill%3D%22%23868E96%22/%3E%3Crect%20x%3D%226%22%20width%3D%2211%22%20height%3D%222%22%20transform%3D%22rotate(90%206%200)%22%20fill%3D%22%23868E96%22/%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%227%22%20height%3D%222%22%20transform%3D%22rotate(90%2010%204)%22%20fill%3D%22%23868E96%22/%3E%3C/svg%3E

div {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%20fill%3D%22none%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%227%22%20height%3D%222%22%20transform%3D%22rotate(90%202%204)%22%20fill%3D%22%23868E96%22/%3E%3Crect%20x%3D%226%22%20width%3D%2211%22%20height%3D%222%22%20transform%3D%22rotate(90%206%200)%22%20fill%3D%22%23868E96%22/%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%227%22%20height%3D%222%22%20transform%3D%22rotate(90%2010%204)%22%20fill%3D%22%23868E96%22/%3E%3C/svg%3E
");
}

 

이렇게 인코딩 된 코드를 넣으면 렌더링된 화면에서는 디코딩되어 원하는 아이콘을 볼 수 있습니다. 

 

2-2) 인코딩 종류

인코딩 방법으로 퍼센트 인코딩과 Base64 인코딩이 있습니다.

둘 다 브라우저 호환은 좋으나, 퍼센트 인코딩은 가볍고 diff 친화적이며 Base64는 특수문자 이슈를 최소화하기에 좋습니다. 

• 퍼센트 인코딩 : #같은 문자를 %23처럼 바꿔서 URL에 안전하게 넣는 것.
• Base64 : SVG 전체를 Base64 문자열로 바꿔 넣는 방식(브라우저 호환성/안정성 좋음)

---

 

< svg >요소를 인코딩하는 방법으로 저는 두가지를 사용하고 있습니다.

•  figma 플러그인 : Export SVG to URI

https://www.figma.com/community 에서 검색하여 저장

 

• ai 사용 : "이 svg 코드를 data url 형식으로 바꿔줘"

---

 

처음에는 아이콘을 저장 후, 브라우저로 열어서 코드를 복사한 뒤 gpt에게 요청하는 형식으로 많이 사용했지만, 최근 figma 플러그인을 알게 되며 이를 많이 활용하고 있습니다.

심지어 플러그인에서 svg 코드의 길이도 최적화 시켜주기 때문에 코드 공간차지를 줄일 수 있어 보다 효율적입니다.

Export SVG to URL 플러그인 사용 화면

 

2-2) 인코딩된 SVG background-image의 url로 넣기

인코딩이 되었다면 다음은 더욱 간단합니다.

이제 적용시키고자 하는 요소에 background-image 속성을 사용하여 url 주소로 인코딩된 코드를 입력하면됩니다.

 

2-3) 아이콘 사이즈 및 위치 조절하기

아이콘의 색상과 크기, 위치등은 bakground 관련 속성을 사용하여 조정할 수 있습니다.

• background-repeat : 배경이미지 반복 방법 / 추천 : no-repeat
• background-position : 배경이미지 위치 지정 / 추천 : 8px center 혹은 left ceter 혹은 right center]

background-positiond은 padding과 함께 쓰입니다.
예를들어, 버튼요소 왼쪽에 12*12px 아이콘을 넣고 싶다면, padding-left 를 24px 정도를 준 뒤 background-position을 8px center를 주면 왼쪽에서 8px 떨어지고 세로 중앙에 아이콘이 위치하게 됩니다.

• background-size : 배경이미지 크기 / 추천 : 원하는 사이즈 입력

<svg> 아이콘의 경우 벡터 형식으로 크기 변형이 자유롭기 때문에 원하는 사이즈를 입력하면 됩니다.
다만 아이콘이 가지고 있는 기존 비율은 그대로 유지되어야 아이콘이 잘려보이지 않습니다.

+) background-size를 contain 혹은 cover로 하면 적용시킨 요소의 넓이나 높이에 맞춰 크기가 변합니다.

• 아이콘 색상 변경

1) data URL의 색상 변경
색상을 변경하고 싶다면 data URL의 색상 부분을 변경하면 됩니다.
코드를 잘 살펴보면 fill, stroke을 사용해 색상이 부여된 것을 볼 수 있습니다.
이때,  값으로 %23이 앞에 붙어 있을텐데 %23은 #이 인코딩된 코드입니다.
%23뒤의 코드를 삭제 후 원하는 색상의 Hax 코드로 바꾸면 됩니다.
  
예를 들어,  stroke='%2328A745' 라는 코드는 stroke="#28A745"를 말합니다.
#FFFFFF로 변경하고 싶다면 storke='%23FFFFFF'로 변경하면 흰색으로 적용됩니다.

2) CSS로 색상 변경, currentColor
만약 data URL이 아닌 CSS 로 색을 변경하고 싶다면, 제한적이지만 currentColor를 활용하여 바꿀 수 있습니다.
기존 data URL의 부여된 색상 코드 대신 문자열 'currentColor'를 입력한 뒤, 부모 혹은 자신의 요소에 css로 color 색상을 추가하면 됩니다.  

예를들어, 아래와 같이 example_div에 css로 color: red가 있다면 background-image의 currentColor로 red가 들어가게 됩니다.

.example_div{
   color: red;
   background-image: url("data:image/svg... stroke='currentColor' ...");
}

• 크기가 잘 적용이 안될 경우 viewbox 확인

viewBox는 <svg>코드의 viewport를 말합니다.
viewBox가 있어야 width, height가 바뀔 때 svg 코드의 크기가 제대로 변형되니 꼭 추가 바랍니다.

 

/* 추천 예시 */
input{
    background-repeat: no-repeat; /* 반복 X */
    background-position: 7px center; /* 좌측 정렬, 세로 가운데 */
    background-size: 16px 16px; /* 아이콘 크기 */
    padding-left: 25px; /* 아이콘 공간 확보 */
    background-image: url("data:image/svg+xml,..."); /* 사용할 URI 전체 붙여넣기 */
}

 

3. input 요소에 background-image를 사용하는 이유

input, textarea, img 같은 대체요소(replaced elements)는 ::before, ::after 와 같은 가상 요소(pseudo-element)를 적용할 수 없습니다.

 

이유는, ::before, ::after 는 요소안에 새로운 가상 콘텐츠 노드를 삽입하는 방식으로 작동하기 때문입니다.

input 같은 대체요소는 내부 구조를 CSS 로 조작할 수 없고, 렌더링 엔진이 운영체제(OS) 위젯 스타일에 의지하기 때문에, 가상요소를 사용하여 내부에 콘텐츠를 추가할 수 없습니다. 

실제로 input에 적용시켜보면 없는 css처럼 아무 반응을 하지 않는 것을 볼 수 있습니다. 

 

그렇기 때문에 input 대신 <div>와 같은 요소로 한번 감싼뒤 부모요소에 적용시키거나 html에 직접 <svg> 코드를 사용해야합니다.

이 방법을 사용할 경우 클래스명 작명하는 것부터 해서 적용하고자하는 코드의 속성까지 생각보다 많은 번거로움이 따릅니다.

하지만 background-image 속성을 사용하면 생각보다 간단히 위치와 크키등을 잡을 수 있으며, 재 사용시 그 코드를 그대로 복사하면 되고 수정시에도 해당 요소의 위치를 css코드의 번호로 찾으면 되기 때문에 생각보다 더 유용하게 사용할 수 있었습니다.