컴퓨터 그래픽의 저장 방식에는 크게 래스터와 백터 두 종류가 있는데, 래스터는 우리가 평시에 많이 쓰는 *.png, *.jpg처럼 픽셀단위로 색상값을 지정해서 저장하는 방식이고, 벡터는 점의 좌푯값을 저장하고 이 점들을 이어서 점/선/면을 계산해서 표현하는 방식임.

래스터는 픽셀단위로 색상값을 저장한다는 말에서 알 수 있듯이 래스터 이미지는 색상값이 저장될 공간이 할당되어 있어야 함. 그게 이미지 크기(px)인거고 예시로 1920x1200px같은 직사각형 형태의 배열이 되는거임.

그에 비해 벡터는 점의 좌푯값만 저장되기 때문에 이미지 데이터가 담길 컨테이너의 크기에는 제약이 없음. 사이즈를 줄이거나 늘여도 좌푯값을 그에 비례시켜서 표시하면 되니까 무한정 확대해도 눈으로 봤을 때 절대 깨지지 않음.

둘 다 내용은 똑같이 황해도 지도인데, 왼쪽은 *.png 무손실 압축방식을 통해 저장된 래스터 이미지고 오른쪽은 동일한 출력 대상을 *.svg 벡터 이미지로 변환해 저장한 이미지임. 왼쪽 파일은 5496×4364px 크기의 컨테이너에 속한 픽셀 하나하나에 색상값이 저장되어 있기 때문에(실제론 특수한 규칙을 통해 저장됨) 용량이 큰 편임. 그러나 벡터 이미지는 각 도형의 점들의 좌푯값만 가지고 있기 때문에 왼쪽의 *.png 파일과는 다르게 용량이 매우 작음.

벡터 이미지는 이 좌푯값을 XML 규격으로 저장하기 때문에 필요시에 직접 파일을 까서 코드로 수정할 수도 있음. 모든 도형 하나하나가 svg라는 객체의 하위 path 객체로 따로따로 저장되어 있음.

이걸 대충 까서 예쁘게 손질하면 이렇게 구성되어 있는걸 확인할 수 있음.

벡터 이미지는 이렇게 구성되어 있기 때문에 아무리 확대를 해도 깨져 보이지 않는 것. 그래서 요즘 디자인 요소나 로고, 지도 등지에서 벡터 그래픽이 많이 쓰이고 있고 권장되는 이유임. 또한 위의 이유들(좌푯값으로 저장되고 명시적으로 규격이 획정된 컨테이너 영역이 없음) 때문에 일반적인 갤러리 어플에선 벡터 이미지를 지원하지 않음(언젠간 지원하게 되지 않을까 싶음). 대신 웹브라우저는 XML/HTML 파일 읽기가 가능하기 때문에 웹브라우저를 통해 볼 수 있음.

벡터 이미지라고 단점이 없는건 아닌데 일반적으로 래스터 이미지보다 읽어들일 때 시스템 자원을 대체로 더 많이 소모하는 편임. 그냥 저장된 값만 그대로 불러오면 되는 래스터 이미지와는 다르게 지정된 좌푯값들을 기준으로 클라이언트단에서 계산해서 그래픽을 출력해야하기 때문임.