SVG — 점 대신 선의 모양을 기록하면

작은 아이콘을 크게 늘렸더니 가장자리가 네모 계단처럼 보인다. 반면 어떤 그림은 같은 일을 해도 선이 매끈하게 이어진다. 둘 다 화면의 그림인데 왜 확대했을 때 다르게 보일까.

이미지가 무엇을 기록하고 있는지가 다르기 때문이다. 픽셀마다의 색을 저장하는 방식과 선과 도형을 설명하는 방식이 있다. SVG는 후자에 쓰이는 형식이다. 그 이름을 알면 인터넷의 작은 그림을 보는 눈도 조금 달라진다.

01. 점의 색을 남기는 그림

사진 같은 래스터 이미지는 정해진 수의 픽셀에 색 정보를 담는다. 충분히 크게 표시하면 원래의 작은 점들을 더 넓은 화면에 표현해야 한다. 프로그램이 사이의 값을 계산해 부드럽게 보이게 할 수는 있어도 처음에 없던 모든 세부를 되찾는 것은 아니다.

이것은 사진이 나쁜 형식이라는 뜻이 아니다. 빛과 질감의 복잡한 변화를 담는 데는 픽셀의 색을 기록하는 방식이 잘 맞는다. 어떤 그림인지에 따라 필요한 표현이 다르다. 확대의 결과 하나로 모든 이미지의 좋고 나쁨을 정할 수는 없다.

원 한 개를 그린다고 생각해 보자. 화면의 점마다 색을 남길 수도 있지만, 중심이 어디이고 반지름이 얼마인지 설명할 수도 있다. 후자의 정보를 알면 더 큰 크기에 맞추어 원을 다시 그릴 수 있다.

이는 벡터 방식의 첫 이해를 위한 예다. 실제 도형에는 선의 두께와 색, 위치 같은 정보도 들어간다. 정해진 작은 그림을 단순히 잡아당기는 대신, 모양을 설명한 내용을 다른 크기로 그려 내는 차이가 있다. 이 때문에 아이콘과 도형에서 장점이 나타날 수 있다.

SVG는 XML을 바탕으로 하는 언어다. 원과 사각형, 간단하거나 복잡한 곡선 같은 요소를 표현할 수 있다. 여러 도형을 묶어 하나의 그림으로 조직하는 방법도 있다. 사람이 코드로 직접 작성해야만 하는 것은 아니고 이를 다루는 그림 프로그램도 있다.

여기서는 문법을 배울 필요가 없다. 그림 파일의 안쪽에 작은 색점만 들어 있는 것이 아니라 모양과 관계를 설명하는 정보가 있을 수 있다는 점이 중요하다. 같은 화면의 그림도 그 안에 적어 둔 내용은 다를 수 있다.

SVG의 도형은 표시할 크기에 맞추어 다시 그릴 수 있다. 그래서 벡터로 정의한 선과 윤곽은 래스터 이미지를 단순히 늘리는 경우와 다르게 확대할 수 있다. 같은 표지를 작은 버튼과 큰 화면에 사용할 때 이런 차이가 도움이 된다.

그렇다고 어떤 크기에서도 모든 디테일이 똑같이 보기 좋다는 뜻은 아니다. 아주 작은 크기에서는 복잡한 선이 구별되지 않을 수 있고, 표시 장치와 그리는 방식도 결과에 영향을 준다. 도형 정보를 유지하는 일과 읽기 좋은 디자인은 함께 생각해야 한다.

MDN은 SVG가 색의 점진적인 변화와 회전, 필터 효과, 애니메이션 등도 지원한다고 설명한다. 단순한 원 몇 개만 그리는 형식은 아닌 것이다. 여러 기능을 조합하면 그림은 꽤 복잡해질 수 있다.

다만 기능이 있다는 사실과 모든 환경이 같은 수준으로 지원한다는 것은 다르다. 보는 프로그램에 따라 결과가 달라질 수 있다. 이번 이야기는 작은 도형의 원리를 중심으로 읽는 것이며 모든 소프트웨어에서 같은 모습이 보장된다는 안내가 아니다.

SVG는 래스터 이미지와 도형을 함께 다룰 수도 있다. 그래서 파일 이름이 SVG라고 내부의 모든 부분이 자동으로 벡터가 된 것은 아니다. 사진을 포함한 부분은 그 사진이 갖고 있는 정보의 한계를 이어받을 수 있다.

이는 PNG 파일이라고 모두 투명한 배경을 갖지는 않는 것과 비슷한 구분이다. 형식이 할 수 있는 기능과 실제 파일에 들어 있는 내용은 다르다. 확장자만 바꾸어 낮은 해상도의 사진을 넣었다고 없는 세부가 새로 생기지는 않는다.

단순한 도형은 적은 설명으로 표현할 수 있다. 그러나 모양이 매우 복잡하고 효과가 많으면 필요한 정보와 표시 작업도 늘어날 수 있다. SVG가 모든 사진과 모든 그림보다 작고 빠른 형식이라고 정리할 수는 없다.

어떤 이미지인지와 어디에 쓸지가 먼저다. 화면의 아이콘과 여행 사진은 필요한 성질이 다르다. 가장 좋은 확장자 하나를 고르는 문제보다, 그림이 어떤 정보를 담고 어떤 크기에서 읽혀야 하는지에 맞추어 선택하는 문제에 가깝다.

함께 실은 AI 삽화는 곡선과 크기가 다른 종이 모양을 살피는 작업 장면이다. 이 삽화 파일 자체가 SVG이거나 실제 벡터·래스터 확대를 비교한 실험 자료는 아니다. 모양을 설명해 다시 그린다는 생각을 떠올리는 이미지다.

다음에 작은 아이콘을 크게 보게 되면 그 그림이 점을 저장했는지 도형을 설명했는지 궁금해해 보자. 눈앞의 결과는 비슷해도 크기를 바꿀 때 다른 성질이 나타날 수 있다. SVG는 그림을 보관하는 방식에도 여러 종류의 언어가 있다는 것을 알려 준다.

이야기의 바탕이 된 자료