요약

  • W3C가 2001년 9월 4일 권고안으로 낸 SVG 1.0은 벡터 경로와 도형, 글자, 이미지를 XML로 표현하는 이차원 그래픽 언어였다.
  • 좌표계와 뷰포트 규칙을 이용하면 하나의 기하학적 그림을 크기가 다른 화면 영역에 옮겨 그릴 수 있다. 지도 확대가 낡은 픽셀을 크게 늘리는 일에만 머물지 않게 됐다.

작은 지도에서 골목 하나를 확대해 달라고 하면, 점으로 된 그림은 더 커진 점을 돌려준다. 골목이 원래 네모난 벽돌로 포장됐다고 우기는 셈이다. SVG 1.0 권고안은 다른 답을 마련했다. 길은 경로로, 구역은 도형으로, 지명은 글자로 적어 웹에 보낼 수 있다. 한 번 찍은 화면의 흔적 대신 그림을 만드는 정보를 함께 건네는 방식이다.

규격의 도입부는 직선과 곡선으로 이뤄진 경로, 이미지와 글자를 그래픽 객체로 다룬다. 객체는 묶고, 꾸미고, 변형하고, 겹칠 수 있다. 지도에서 강줄기와 역 이름은 서로 다른 일을 한다. 동네를 통째로 옮길 수 있고, 교차로의 선만 고칠 수도 있다. 도시를 매번 새로 사진 찍듯 다시 만들 필요가 줄어든다.

그림을 어디에 보여줄지는 좌표 장이 설명한다. SVG는 그림이 놓인 공간과 독자가 보는 유한한 직사각형인 뷰포트를 구분한다. 뷰포트의 좌표와 작성자가 객체를 배치한 사용자 좌표도 별개다. viewBox는 사용자 공간의 직사각형을 골라 보이는 창에 맞춰 옮긴다. preserveAspectRatio는 그 창에 들어가는 비율을 조절한다. 작은 카드와 큰 지면은 같은 길망을 서로 다른 크기로 보여줄 수 있다.

이동, 확대와 축소, 회전, 기울이기 같은 변형도 가능하다. 여러 객체를 함께 움직일 수 있고, 안쪽에 들어간 SVG 요소가 새 뷰포트를 만들 수도 있다. 지도 제작자는 먼저 도로와 강의 관계를 정한 뒤 그중 어느 부분을 화면에 넣을지 고른다. 화면은 끝내 픽셀을 찍지만, 원본은 그 픽셀을 다시 만들 경로와 배치 규칙을 보관한다.

SVG 1.0에는 글자, 포함된 이미지, 마스크, 필터, 애니메이션과 스크립트도 들어 있었다. 웹 그림을 움직이고 반응하게 만들 수 있는 재료들이다. 이 이야기에서 더 큰 변화는 조용한 쪽에 있다. 그림의 기하학과 보는 창을 따로 설명할 수 있게 되면서, 그림은 한 크기의 완성 사진으로만 배달되지 않았다.

W3C는 2001년 9월 5일 발표에서 SVG 1.0을 이차원 벡터 그래픽을 위한 XML 언어로 소개했다. 권고안 자체의 날짜는 그 전날이다. 웹은 그림의 결과뿐 아니라 그림을 세우는 방법도 표준 형식으로 받을 수 있게 됐다. 독자가 지도에 얼굴을 들이밀자 길은 제 길을 다시 그렸다. 픽셀죽은 밥상에만 올리면 된다.