V 앱(vlive.tv)의 svg 아이콘입니다. 하늘색 배경의 색상 코드는 #54f7ff, 남색 글자의 색상 코드는 #46465a 입니다. svg엔 기본적으로 색상을 넣지 않았으니, 사용하실 때 참고해주세요.

svg의 stroke-dashoffset 값을 통해 만드는 스크롤 인디케이터입니다. 스크롤 해보세요! HTML123 Colored by Color Scriptercs path의 내용은 별로 중요하지 않고, "scroll-indicator"란 id와 'stroke, stroke-width, fill 세 가지 옵션이 중요합니다. JS12345678var a = document.getElementById("scroll-indicator"), b = a.getTotalLength(); a.style.strokeDasharray = b, a.style.strokeDashoffset = b, window.addEventListener("scroll", si); function si() { var c = (docum..

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

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

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

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