카카오톡 svg 아이콘
카카오톡 svg 아이콘

카카오톡 정도면 아이콘 폰트용 svg도 인터넷에 있지 않을까 싶었는데 제 착각이었습니다 ;; 예전엔 귀찮아서 댓글 모양의 아이콘으로 사용하다가, 이번에 새 스킨 작업하며 새 마음 새 뜻으로 작업해봤습니다. 아이콘 폰트용이라 색상이 들어있지 않으니. svg로 사용하실 땐 fill로 색상을 채워주셔야 합니다.

티스토리 svg 아이콘
티스토리 svg 아이콘

티스토리의 업데이트된 로고입니다. 예전에 작업했던 자료랑 좀 안 맞아서 처음부터 했네요 ㅠㅠ아이콘 폰트용으로 작업해서 색상이 들어있지 않습니다. svg로 사용하시려면 fill을 이용해주세요.

소녀시대 로고 svg 파일
소녀시대 로고 svg 파일

소녀시대 로고 두 개를 svg로 작업해봤습니다.svg 파일의 장점과 특징은 이전 글에 정리를 조금 해놓았습니다. 혹 svg를 모르신다면 먼저 저 글을 보시는 것도 나쁘진 않은 선택지라 생각합니다. 위 svg 파일엔 아무런 색상도 들어있지 않습니다. 아래 이미지처럼 포이게 하시려면, svg에 fill="#f09d9d" 란 옵션을 주셔야 합니다. 정확한 공식 색이 있다면 그거로 작업을 했을 텐데, 공식 색 색상 코드가 찾아봐도 잘 찾아지지 않아서 색이 조금 다를 수 있습니다. Girls Generation.svg의 모습입니다. 소녀시대 Party 로고입니다.포토샵으로 옮겨오면서 i의 점이 좀 이상해졌는데, 원본 파일은 그렇지 않습니다 ㅠㅠ Girls Generation2.svg의 모습입니다. 소녀시대 정규 ..

티스토리 로고 svg 파일
티스토리 로고 svg 파일

아이콘 폰트로 적용한 모습 티스토리 로고의 svg 파일입니다. 아직 일러스트레이터 다루는 게 서툴러서 삽질을 좀 했네요 ㅠㅠ위는 아무런 색도 채우지 않은 svg 파일, 아래는 티스토리 색(#eb531f)으로 채운 svg 파일입니다. svg 코드티스토리 로고

트와이스 로고  svg 파일
트와이스 로고 svg 파일

svg는 벡터 이미지로, 기존의 이미지 파일들처럼 확대하면 깨지는 현상이 발생하지 않습니다. 외에도, css를 통해 기존의 이미지보다 다양한 효과를 줄 수 있으니 웹에선 기존의 이미지보다 훨씬 자유롭고 다양하게 활용할 수 있습니다. 아래의 이미지가 위 첨부 파일의 모습입니다. 응용하면 이런저런 효과들을 줄 수 있습니다. 이렇게 외곽선을 그리는 애니메이션을 사용할 수 있고 기존의 css 애니메이션들도 물론 자유롭게 이용할 수 있습니다! https://daneden.github.io/animate.css/ css 애니메이션 참고용 사이트

스킨/스킨 목록
잡담
갤러리