frontendsvg

SVG

, , , ,

SVG란?

Scalable Vector Graphics의 약어로써 직역하면 확장 가능한 벡터 그래픽이란 뜻입니다. SVG를 이용하여 벡터형식의 2차원 그래픽을 표현 할 수 있습니다. SVG는 자동으로 확대, 축소를 대응합니다. HTML5부터 SVG엘리먼트로 구현되었습니다. 향후 데이터 시각화를 통해 데이터의 그래프 표현과 iot, 빅데이터로 인한 필요성 증가 될 것입니다. 또한 모바일에 적용되어 아이콘 또는 메뉴버튼에 사용하여 확대, 축소에 대응 하게 될 것입니다.

SVG 작성 형태

SVG는 html의 요소로 사용 할 수 있습니다. 앞서 설명드린 것과 같이 HTML5부터 지원합니다.

1
2
3
4
<body>
  <svg>
  </svg>
</body>

SVG에 width와 height를 지정하지 않는다면 기본 값은 width="300" height="150"으로 지정됩니다.

SVG 주요 용어

글리프

  • 글자 하나의 모양 단위
  • 도형 기호(괄호, 공백 등) 포함

SVG 캔버스

  • SVG 콘텐츠 표현 공간
  • 좌우 상하의 무한 공간과 유효한 공간으로 구분

뷰포트

  • SVG 캔버스에서 콘텐츠를 표현하는 유효 공간으로 사용자가 이 영역을 눈으로 볼 수 있음
  • 사용자가 볼 수 있는 영역
공유하기