본문 바로가기
반응형

SVG3

웹사이트에 파비콘(Favicon) 적용하기 웹사이트에 파비콘(Favicon) 적용하기 얼마 전 작업을 진행하고 오픈한 웹사이트에 Favicon이 적용되어 있지 않은 것을 발견했습니다. 파비콘은 Favorite + icon의 줄임말입니다. 파비콘을 적용해주면 브라우저 탭에 아이콘 형태로 표시되어 웹사이트의 아이덴티티를 사용자에게 어필하는 데 효과적일 수 있습니다. 또한 즐겨찾기 시에도 활용이되고 다양한 모바일 기기 환경에서도 필요한 항목이 되었습니다. 그리고 무엇보다도 SEO를 완성하는데 있어서도 매우 권장되는 항목이 되었습니다. 깜빡하고 있었는데, 이참에 파비콘 적용을 한번 진행 해봐야겠습니다. 심벌 이미지 파일 준비 파비콘으로 적용하기 위해 svg. png, gif, jpg 등의 포맷으로 이미지를 준비해줍니다. CI의 심볼을 이용하여png 파일.. 2023. 3. 1.
SVG 기초 - 도형 그리기 Part 3 (패스, path) svg는 사실 코드를 이용해서 직접 그려서 사용하는 것보다는 일러스트레이터 등의 툴에서 작업한 결과물을 가져와서 활용하는 측면이 크기는합니다. 그래도, svg가 그려지는 동작원리를 한번 살펴보고 이해해두면 여러 모로 공부가 클 것이라 생각됩니다. 그런 의미에서 이번 포스팅은 svg의 꽃 패스(path)에 대해 살펴보기로 합니다. 패스(path)로 그리기 - 직선(Line) 패스로 도형을 그려보기 위해 다음과 같이 코드를 작성해봅니다. 기존 예제 코드들은 제거하고 패스를 위한 아래 코드를 작성하였습니다. path : 패스로 그리겠다. d : data M : Move to (=그리지 않고 첫 좌표로 이동) L : Line to 선을 그리겠다. 좌표 원소 2개 필요 H : Horizontal Line to =.. 2022. 11. 28.
SVG 기초 - 도형 그리기 Part 1 (직사각형과 원, rectangle & circle) 최근에 SVG를 조금 들여다보면서 공부해보고 있습니다. 예전에는 잘 사용하지 않았는데 최근에 주목도가 매우 커진 것 같습니다. SVG는 Scalable Vector Graphics로서 브라우저에서 벡터 그래픽을 다루는 기술입니다. https://developer.mozilla.org/ko/docs/Web/SVG SVG: Scalable Vector Graphics | MDN **SVG(Scalable Vector Graphics)**는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하 developer.mozilla.org jpg, png, gif = 비트맵 그래픽 ai = 벡터 그래픽 .. 2022. 11. 26.
반응형