Skip to main content

basic elements

basic elements#

요소는 SVG를 구성하는 태그 집합으로 svg를 이해하려면 꼭 알고 있어야 한다. 또 각 요소의 속성(attribute)들도 같이 알아야 한다. 이 페이지에서는 주요 요소들과 주요 속성들을 설명한다. 모든 요소들과 속성들은 mdn svg 참조

svg#

  • mdn svg element
  • 뷰포트(viewport)를 정의하는 컨테이너
  • 가장 바깥쪽 요소(element)
  • svg 조각(flagment)를 포함하는데 사용.
Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

속성#

  • viewBox: 뷰포트상에 위치와 크기를 지정한다. 네개의 값은 각각 "x y width height" 값이고 x, y 는 최소 값을 의미 한다.

좌표#

  • 왼쪽 위 모서리가 0, 0 또는 원점
  • +x 방향은 오른쪽
  • +y 방향은 아래쪽

SVG 캔버스#

  • 아래 svg 요소에서 너비와 높이 속성은 100 * 100 픽셀의 캔버스를 정의하는 것을 의미한다.
<svg width="100" height="100"></svg>

뷰박스#

  • 전체 캔버스의 크기는 200 * 200 필셀로 한다.
  • 뷰박스는 표시할 캔버스 부분을 정의한다.

아래 viweBox는 캔버스의 크기와 동일하므로 모든 캔버스를 화면에 표시한다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

하지만, 아래 viewBox는 (0,0) 에서 시작하여 (100, 100) 픽셀까지의 내용만 보여주므로 확대 표시 된다.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

뷰포트 이해하기#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
일반적인 뷰포트 의미

뷰포트는 현재 화면에 보여지는 그래픽 영역을 의미한다. 일반적으로 브라우저를 예로들 경우 현재 페이지(window 또는 탭)에서 보여지는 문서영역을 나타낸다. 뷰포트 바깥의 컨텐츠는 위 또는 아래로 스크롤해야 볼 수 있다. 요즘에는 뷰포트를 비주얼 뷰포트레이아웃 뷰포트로 구분하는데 비주얼 뷰포트는 위에서 말한 현재 표시되는 고정된 영역을 나타내고 레이아웃 뷰포트는 화면을 줌해서 확대 축소 할 경우 비주얼 뷰포트영역에서 사라지는 부분까지를 모두 포함한다. 즉, 브라우저의 경우 랜더링된 후의 문서 영역 전체를 나타낸다. SVG에서 뷰포트도 의미상으로는 유사하다. 뷰박스가 확대/축소와 같은 줌의 기능으로 이해하면 좀더 쉽다.

뷰포트 참고