라벨이 [HTML]인 게시물 표시

[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:20pxauto;background-repeat:no-repeat;width:20px;height:20px;}.addUser{background-image:url(assets/icons/icon-add-user-on.svg);}
[html]
1<iclass="customIcon addUser"></i>