SVG viewBox와 좌표계

이제 SVG overlay 쪽으로 넘어갑니다.

SVG는 선, path, handle, connector 같은 벡터 편집 UI를 그리기에 아주 좋습니다. 그런데 SVG에는 자기만의 좌표계가 있습니다. 그 좌표계를 화면 크기와 연결하는 핵심 속성이 viewBox입니다.

viewBox를 이해하면 SVG overlay가 훨씬 덜 낯설어집니다.

viewBox는 내부 좌표계다

viewBox = minX minY width height
scaleX = viewportWidth / viewBoxWidth
scaleY = viewportHeight / viewBoxHeight
preserveAspectRatio가 scale 선택과 정렬을 바꾼다.

viewBox는 SVG 내부 좌표 창입니다. viewport 크기는 화면 박스이고, viewBox는 그 박스에 매핑되는 내부 world입니다.

예를 들어 viewBox="0 0 100 100"인 SVG를 500px 크기로 그리면, 내부 좌표 100이 화면 500px에 매핑됩니다. 내부 좌표와 화면 픽셀이 같을 필요는 없습니다.

overlay 정책 두 가지

SVG overlay를 screen 좌표로 쓸 수도 있고, world 좌표로 쓸 수도 있습니다.

screen 좌표 overlay라면 viewBox를 viewport 크기와 같게 둡니다.

viewBox = 0 0 viewportWidth viewportHeight

world 좌표 overlay라면 viewBox를 camera visible range와 동기화합니다.

viewBox = cameraX cameraY visibleWorldWidth visibleWorldHeight

둘 중 하나로 명확히 정해야 합니다. 애매하게 섞으면 포인터 좌표와 path 좌표가 어긋납니다.

preserveAspectRatio="none"은 x/y scale을 독립적으로 늘릴 수 있어서 왜곡이 생길 수 있습니다. 편집 UI에서는 의도한 왜곡인지 아닌지 꼭 확인해야 합니다.

데모에서 볼 것

데모에서는 viewBox 값을 바꾸며 같은 path 데이터가 화면에서 어떻게 확대/이동되는지 확인합니다.

오늘의 핵심은 SVG도 자기 좌표계를 가진다는 점입니다. viewBox는 그 좌표계를 화면 사각형에 붙여주는 약속입니다.