화질 손실 없이 SVG를 PNG로 변환하는 방법

SVG는 픽셀로 이루어진 것이 아닙니다. “여기에 선을 그리고, 이 도형을 이 색으로 채운다”와 같은 일련의 명령이기 때문에 어떤 크기로 그려도 완벽하게 선명하게 유지됩니다. 로고나 아이콘에 SVG가 자주 쓰이는 이유도 여기에 있습니다. 같은 파일이 명함에서도 옥외 광고판에서도 똑같이 선명하게 보입니다.

PNG는 그 반대입니다. 고정된 픽셀 격자죠. 예를 들어 512픽셀 너비로 내보내면 그게 그대로 결과물이 됩니다. 원래 크기보다 크게 확대하면 사진을 확대했을 때처럼 계단현상이 생깁니다. SVG를 PNG로 변환한다는 것은 이러한 그리기 명령을 고정된 격자로 바꾸는 것이며, 이 과정을 래스터화라고 부릅니다.

PNG는 픽셀 크기가 고정되어 있으므로 단 하나의 “무손실” SVG-PNG 변환이라는 것은 없습니다. 결국 해상도를 선택하는 것이고, 화질은 그 선택에 따라 달라집니다. 요령은 실제로 이미지를 어떻게 사용할지에 맞춰 충분히 높은 해상도로 렌더링하는 것입니다.

일반적인 기준은 표시할 크기의 두 배에서 세 배 정도로 내보내는 것입니다. 로고를 페이지에서 200픽셀 너비로 보여준다면 400이나 600픽셀로 내보내면 고해상도 화면에서도 또렷하게 유지됩니다. 인쇄용이 필요하다면 더 크게 내보내세요. 실제로 화질을 눈에 띄게 떨어뜨리는 유일한 실수는 너무 작게 내보낸 뒤 나중에 확대하는 것입니다.

변환은 사용자의 기기에서 실행되므로 파일이 업로드되는 일은 없습니다.

• SVG → PNG 변환기를 열고 SVG 파일을 끌어다 놓으세요.
• 출력 크기를 설정하세요. 원하는 픽셀 너비를 입력합니다(값이 클수록 더 선명해지지만 파일 크기도 커집니다).
• PNG를 내보내고 다운로드하세요.

모든 과정이 브라우저 안에서 바로 이루어지기 때문에, 페이지가 로드된 뒤 오프라인으로 전환해도 계속 작동합니다. 이는 SVG가 서버로 전송되지 않는다는 증거이기도 합니다. 계정도 필요 없고, 워터마크도 없으며, 변환 횟수 제한도 없습니다.

SVG는 투명한 배경을 갖는 경우가 많으며, 이 특성은 그대로 이어집니다. PNG로 내보내도 투명한 영역은 투명하게 유지되는데, PNG가 알파 채널을 지원하기 때문입니다. 로고 뒤에 갑자기 흰색 상자가 생기는 일은 없습니다.

어떤 픽셀 너비를 골라야 할지 모르겠다면, 이미지가 실제로 표시될 위치를 기준으로 시작하세요. 파비콘이라면 64픽셀 정도로 충분할 수 있고, 히어로 이미지라면 2,000픽셀 이상이 필요할 수도 있습니다. 확신이 서지 않는다면 조금 더 큰 크기를 선택하세요. 나중에라도 PNG를 압축해서 파일을 줄일 수는 있지만, 너무 작게 내보낸 이미지에 디테일을 다시 채워 넣을 수는 없습니다. 나중에 JPG가 필요해지더라도 PNG → JPG 변환은 몇 초면 끝납니다.