SVG를 PNG로 - 픽셀이 진짜 필요할 때 (그리고 아닐 때)

완벽한 로고가 있는데 넣을 데가 없는 특유의 답답함이 있습니다. SVG는 어떤 크기에서도 또렷하고, 무게가 거의 없으며, 브라우저에서는 흠 없이 보입니다. 그런데 메일에 끌어다 넣거나, 소셜 미리보기 이미지로 지정하거나, 조금 낡은 소프트웨어에 붙여 넣으려 하면 그냥 안 뜹니다. 빈칸. 파일은 멀쩡합니다. 넣으려는 그곳이 벡터를 못 알아들을 뿐입니다.

그게 SVG를 PNG로 바꾸는 작업이 존재하는 이유 전부입니다. PNG가 더 나아서가 아니라, 대개는 아닌데, 세상의 많은 부분이 픽셀만 읽을 수 있기 때문입니다.

벡터와 래스터, 간단히

SVG는 그림이 아닙니다. 여기 원을 그려라, 저기 이 경로를, 이 색으로 채워라 같은 명령의 묶음입니다. 브라우저는 그 명령을 따라 여러분이 요청한 어떤 크기로든 매번 새로 그려 내므로, 16픽셀이든 16,000픽셀이든 면도날처럼 또렷하고, 파일은 그저 수학이라 계속 작습니다.

PNG는 정반대입니다. 색이 든 픽셀이 한 해상도에서 한 번 정해진 고정 격자입니다. 원래 크기를 넘겨 키우면 무르고 뭉툭해집니다. 그릴 픽셀이 더 없기 때문입니다. 새겨진 것만 있으니까요. 대신 장점은 모든 것이 픽셀 격자를 읽을 수 있다는 것입니다. 이미지의 만국 공통 화폐입니다.

그러니 SVG를 PNG로 바꾸는 건 무한한 확장성을 보편적 호환성과 맞바꾸는 것입니다. 그게 좋은 거래인지는 이미지가 어디로 가느냐에 온전히 달렸습니다.

PNG가 진짜 필요한 때

망설임 없이 래스터로 바꾸는 세 경우입니다. 벡터가 그냥 안 되기 때문입니다.

메일. 메일 클라이언트는 SVG를 렌더링하지 않습니다. Gmail, Outlook, Apple Mail, 사실상 전부가 보안을 이유로 거부합니다. 메일 서명이나 뉴스레터의 로고는 반드시 래스터 형식이어야 합니다. 투명함을 원하니 PNG로요.

소셜과 OG 미리보기 이미지. 링크를 공유할 때 뜨는 작은 카드, 즉 Open Graph 이미지는 고정 크기 래스터여야 하고 보통 1200x630입니다. 플랫폼들은 거기서 SVG를 렌더링하지 않습니다. 원본 아트가 벡터라면 그 정확한 크기로 PNG를 내보냅니다.

오래됐거나 오프라인인 소프트웨어. 많은 데스크톱 앱, 프레젠테이션 도구, 문서 편집기, 인쇄 작업 흐름은 SVG를 못 불러오거나 엉망으로 만듭니다. 넉넉한 해상도의 PNG를 건네면 매번, 놀랄 일 없이 그냥 됩니다.

셋 다에서 결정 요인은 같습니다. 목적지가 물리적으로 벡터를 못 읽으니 확장성은 무의미합니다. 렌더링되는 형식이 안 되는 형식을 언제나 이깁니다.

딱 하나 제대로 할 것: 해상도

여기 제가 가장 많이 보고 저도 초기에 저지른 실수가 있습니다. PNG는 내보낸 크기에 고정되므로, 충분히 크게, 이상적으로는 표시할 정확한 크기로 내보내야 합니다.

로고를 100x100 PNG로 내보내고 고밀도 화면에서 300픽셀로 보이면 무르고 우툴두툴해 보입니다. 그 공간을 채울 픽셀이 없으니까요. 해법은 간단합니다. 실제로 쓸 크기로, 또는 더 크게 내보내세요. 특히 Retina와 4K 디스플레이에서는 흔히 표시 크기의 2배가 필요합니다. 이것이 벡터를 떠나면서 내주는 하나의 진짜 이점이니, 목표 해상도를 제대로 잡는 데 잠깐 시간을 쓰세요.

래스터로 바꾸면 안 되는 때

목적지가 SVG를 읽을 수 있다면 SVG를 그냥 두세요. 그걸로 끝입니다.

내 웹사이트에서 아이콘이나 로고는 벡터로 남아야 합니다. 모든 화면, 모든 확대 수준에서 또렷하고, 같은 PNG보다 작고, 더 고밀도 디스플레이가 나올 때마다 더 큰 판을 다시 내보낼 일이 없습니다. 거기서 래스터로 바꾸는 건 순전히 손해입니다. 이미 가진 호환성을 얻자고 형식의 가장 좋은 특성을 버리는 셈이니까요.

그리고 원본을 래스터로 바꾸지 마세요. SVG가 진실의 출처입니다. 언제든 어떤 크기의 PNG든 만들어 냅니다. PNG는 반대로 못 갑니다. 픽셀 격자에서 깨끗한 벡터 경로를 되살릴 수 없습니다. 그러니 SVG를 지키고, 각 PNG는 한 자리를 위한 일회용 내보내기로 다루세요. 다른 모든 것과 같은 원칙입니다. 보내는 사본을 변환하고, 내가 편집하는 원본은 지킨다.

제가 실제로 하는 방법

벡터에서 픽셀이 필요할 때 여기 SVG를 PNG로 변환하는 도구를 씁니다. 브라우저 안에서 SVG를 렌더링해 PNG를 건네므로, 어디로도 업로드되지 않습니다. 전 과정이 내 기기에서 일어납니다. 갈 곳에 맞는 크기를 고르면 투명함이 온전한 깨끗한 PNG가 나옵니다.

하지만 진짜 기술은 변환이 아닙니다. 먼저 던지는 질문입니다. 이곳은 벡터를 읽는가. 그렇다면 SVG를 그냥 두고 가장 또렷하고 가장 작은 선택지를 누리세요. 아니라면, 메일이든 OG 카드든 완고한 낡은 앱이든, 알맞은 크기로 래스터로 바꾸고 다음을 위해 SVG를 안전하게 지키세요. 그 판단을 제대로 하면 로고 자리에 빈 상자가 뜨는 일은 다시 없을 겁니다.