SVG PNG 변환

정해진 적 없는 해상도를 정하는 일

SVG에는 픽셀도 크기도 없습니다. 이 경로, 저 채우기, 이 곡선 같은 그리기 명령의 모음이며, 그래서 아무리 확대해도 선명하고 로고는 가능한 한 오래 SVG로 두는 것이 좋습니다. 래스터화하면 크기가 영원히 하나로 고정됩니다. 그러니 이미지가 표시될 가장 큰 자리에 맞춰 크기를 고르고, 밀도가 2배나 3배인 화면에는 픽셀도 2배나 3배가 필요하다는 점을 기억하세요. 64포인트로 표시되는 아이콘이 최신 휴대폰에서 제대로 보이려면 192픽셀이 필요합니다.

가장 자주 문제가 생기는 것은 텍스트이며, 그 이유를 알아 둘 만합니다. SVG는 “이 문자열을 Helvetica Neue로 조판하라”고 지시합니다. 렌더링하는 컴퓨터에 Helvetica Neue가 없으면 다른 글꼴로 대체되고 레이아웃이 밀려서, 상자에 맞던 제목이 넘칩니다. URL로 참조된 웹 폰트는 여기서 아예 불러오지 않습니다. 이미지로 렌더링되는 SVG는 의도적으로 격리되어 네트워크에 접속할 수 없기 때문입니다. 해결책은 모든 디자이너가 결국 배우게 되는 그 방법입니다. 내보내기 전에 텍스트를 윤곽선으로 변환하면 글자 모양이 글꼴이 필요 없는 경로가 됩니다.

같은 격리가 다른 의외의 결과도 설명합니다. 어딘가의 .png를 가리키는 image 요소처럼 링크된 비트맵은 아무것도 렌더링되지 않습니다. 스크립트가 실행되지 않으므로 JavaScript로 스스로를 그리는 SVG는 비어 있거나 반쯤 그려진 채로 나옵니다. 선언형 애니메이션은 초기 상태, 즉 첫 프레임의 정지 화면으로 렌더링됩니다. 자체적으로 완결된 것은 모두 완벽하게 작동합니다. 그라데이션, 필터, 클리핑 경로, 마스크, 내장된 data URI 이미지, 블러 효과가 모두 그려진 그대로 렌더링됩니다.

이 작업에 맞는 결과 형식은 PNG이며 JPEG는 아닙니다. 벡터 아트워크는 단색과 선명한 경계로 이루어져 있는데, PNG는 바로 이런 것을 잘 압축하고 JPEG는 망가뜨립니다. JPEG에서는 모든 선명한 경계에 번짐이 생깁니다. 투명도는 실제 알파 채널로 옮겨지므로, 적절한 크기로 내보낸 로고는 어떤 배경 위에도 올릴 수 있습니다. SVG에 크기 정보가 전혀 없고 viewBox만 있다면 가로세로 비율은 거기서 가져오고 크기는 직접 정하면 됩니다.

다른 작업이 필요할 때

resvg와 rsvg-convert는 실제 글꼴 환경을 갖춘 상태에서 명령줄로 SVG를 렌더링하므로, 텍스트가 대체 글꼴이 아니라 의도한 글꼴로 나옵니다. 명령은 rsvg-convert -w 512 in.svg -o out.png가 전부입니다. Inkscape --export-type=png --export-dpi=300은 현존하는 가장 완전한 사양 구현체로, 가벼운 렌더러가 근사치로 처리하는 필터와 블렌드 모드까지 다룹니다.

래스터화하기 전에 정말 PNG가 필요한지부터 확인하세요. 모든 브라우저가 10년 넘게 SVG를 기본으로 그려 왔고, 웹사이트의 로고나 아이콘이라면 SVG가 더 작고, 무한히 선명하며, CSS로 스타일도 지정할 수 있습니다. 픽셀이 꼭 필요한 경우는 생각보다 좁습니다. 파비콘, 소셜 미리보기 이미지, 이메일, 앱 스토어 에셋, 벡터를 읽지 못하는 소프트웨어 정도입니다.