[HTML] SVG 아이콘 만들기

안녕하세요. 명동섞어찌개입니다.

SVG (Scalable Vector Graphics) 는 이름 그대로 Bitmap 이미지와 달리 확대, 축소해도 깨지지 않는 이미지 포맷이죠. 요새 아이콘을 화면에 넣을 때 많이 쓰는 방법으로 아이콘 폰트를 임베딩해서 쓰거나, svg 아이콘을 다운받아 쓰는 법 외에 SVG 아이콘을 그려서 화면에 적용하는 아주 간단한 팁을 알려드릴께요!

1. Adobe 일러스트레이터를 켭니다.

없으신 분은.. 디자이너분께 부탁드려보시거나 회사 라이센스 프로그램이 있을 경우 그걸 써보세요 (협업~)


2. 일러스트레이터에서 필요한 아이콘을 그립니다.

굳이 코딩으로 어렵게 계산해서 그리실 필요가 전혀 없습니다. 그냥 보면서 그립니다.




3. 아이콘을 선택한 후 복사합니다. (Ctrl + C)



4. 새 문서를 만든 뒤 붙여넣기 합니다. (Ctrl + V)

[icon-add-user-on.svg]

끝. 참 쉽죠?!



5. 마지막으로 CSS 에 적용합니다.


저 같은 경우는 일반적으로 이런 식으로 사용합니다.

[layout.css]
1
2
3
.customIcon:before {content: '';position: absolute;top: 12px;left: 3px;background-size: 20px auto;background-repeat: no-repeat;width: 20px; height: 20px;}

.addUser {background-image: url(assets/icons/icon-add-user-on.svg);}

[html]
1
<i class="customIcon addUser"></i>





댓글

주간 인기글

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

[NCP] Live Station 을 활용해 실시간 방송 채널 구성하기 (Feat. PRISM Live Studio)

남산 케이블카 이야기

고양이의 이동과 집보기

[ios] 기본 공유하기 기능 사용하기