[공지사항] 푸샤 깃허브 블로그 업데이트 사항

SVG 란?

SVG란 Scalable Vector Graphics의 약자로써 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. 어떠한 디바이스 크기에서도 깨지지 않고, 마크업 언어로 css와 javascript로 수정이 가능하여 웹상에서 보이는 아이콘들은 모두 SVG아이콘입니다.
만약 이미지를 PNG나 JPG 파일 확장자로 불러온다면 이미지가 많이 흐릿하게 보이거나 깨지는 경우가 많다. 또한 파일 용량 크기 때문에 로딩 속도가 느려지거나 서버 저장 용량 공간을 많이 차지게 하게 된다.

예시

<!-- SVG HTML 코드 예시 -->
<html>
  <body>
    <h1>My first SVG</h1>

    <svg width="100" height="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="green"
        stroke-width="4"
        fill="yellow"
      />
    </svg>
  </body>
</html>

장점

  1. 이미지가 확대해도 깨지지 않는다.
  2. 용량이 적다.
  3. 출력이 빠르다
  4. 수정과 애니메이션이 가능하다.

단점

  1. IE8 이전 버전의 경우 호환되지 않는다.
  2. 어느 정도 사전 지식이 필요하다.

참고 영상

참조 문서 및 사이트

상단으로 푸샤 깃허브 이동

댓글남기기

참고