SVG를 알맞은 크기의 PNG로 바꾸는 방법

짧은 답

SVG를 이미지로를 열고 파일을 넣은 다음 크기를 말하세요. 어떤 크기를 쓰라는 말을 듣지 못하셨다면 긴 변 1024픽셀이 좋은 기본값입니다. 거의 모든 용도에 충분히 크고 메일로 보낼 만큼 작습니다. 형식은 PNG, 배경은 투명 그대로 두고 파일을 가져가세요.

아래는 그 기본값으로 충분하지 않을 때 무엇을 할지 다룹니다. 숫자가 정해져 내려왔을 때, 인쇄로 갈 때, 또는 결과가 이상해 보일 때 말이죠.

크기를 파일이 아니라 사람이 정해야 하는 이유

JPEG는 측정된 픽셀의 격자입니다. 얼마나 큰지 물으면 답이 있습니다. SVG는 애초에 그림이 아니라 지시의 묶음입니다. 여기 원을 그려라, 이 경로를 저 색으로 칠해라 같은 것들이죠. 그리고 지시에는 크기가 없습니다. 브라우저는 그걸 16픽셀로도 4000픽셀로도 수행할 수 있고, 결과는 어느 쪽이든 똑같이 선명합니다. 무언가를 확대하는 게 아니라 다시 그리는 것이니까요.

그래서 변환기가 대신 숫자를 골라 줄 수 없고, 큰 숫자를 골라도 아무 대가가 없습니다. “더 크게”가 공짜인 유일한 이미지 작업입니다.

대부분의 SVG 파일에는 width와 height 속성이 있고 도구가 그걸 보여 줍니다. 다만 그건 기본값이지 한계가 아닙니다. width="24"라고 적힌 아이콘은, 그린 사람이 24 픽셀짜리 도구 모음을 염두에 두고 있었다는 말을 할 뿐입니다.

숫자는 실제로 어디서 오는가

웹사이트라면. 그 이미지가 페이지에서 차지하는 CSS 픽셀 크기에, 신경 쓰는 화면들의 픽셀 밀도를 곱하세요. 가로 200 픽셀 자리의 로고는 레티나 노트북에 400 픽셀, 요즘 휴대폰에 600픽셀 파일이 필요합니다. @2x와 @3x가 뜻하는 것이 그게 전부이고, 그것을 대신 써 주는 도구가 계산을 세 번 하지 않게 해 주는 이유입니다.

앱 아이콘이나 스토어 등록 이미지, 파비콘이라면. 숫자가 공표되어 있어서 계산할 것이 없습니다. 스토어 페이지에 적힌 그대로입니다. 파비콘이라면 아예 래스터화하지 마시고 .ico를 만드세요. 여러 크기를 한 파일에 담는데, 브라우저 탭과 즐겨찾기, 윈도우 바로 가기가 저마다 다른 크기를 요구하기 때문입니다.

인쇄라면. 인치 단위의 실제 크기에 인쇄기의 해상도를 곱하세요. 가로 2인치로 명함에 들어가는 로고를 300 DPI로 하면 600픽셀입니다. 같은 로고를 A4 폭 8.3 인치에 걸치면 2500쯤이고요. 인쇄소는 으레 300 DPI를 요구하고, 방 건너에서 보는 대형 현수막이라면 150이면 넉넉합니다.

소셜 미리보기나 OG 이미지라면. 플랫폼이 상자를 정해 줍니다. 대부분의 링크 미리보기는 ⁦1200 × 630⁩이고, 그 상자는 대개 로고와 비율이 다릅니다. “여백 넣기” 설정이 그것을 위한 것입니다. 그림은 자기 비율 그대로 가운데 놓이고 나머지는 배경색이 채웁니다. 확인해 보지 않았다고 모두에게 알려 주는 늘어난 로고 대신에요.

둘 이상이 해당한다면 큰 쪽을 쓰세요. 필요보다 큰 PNG는 조금 더 큰 내려받기일 뿐이고, 너무 작은 PNG는 나중에 고칠 수 없습니다. 이유는 다음 절에 있습니다.

되돌아갈 수는 없습니다

래스터화는 일방통행입니다. 그림이 일단 PNG가 되면 다른 사진과 똑같은 픽셀이고, 그 뒤에 키우려면 한 번도 측정된 적 없는 디테일을 지어내야 합니다 사진을 확대할 때 나오는 그 흐릿하고 번진 결과와 똑같습니다.

그러니 SVG를 간직하세요. 그것이 원본이고, 거의 언제나 더 작은 파일이며, 앞으로 필요한 모든 크기가 거기서 완벽하게 나옵니다. PNG는 특정 용도 하나를 위한 내보내기이고, 다른 크기가 필요할 때 옳은 수는 내보낸 것의 크기를 바꾸는 게 아니라 다시 내보내는 것입니다.

PNG를 SVG로 되돌려 준다는 소프트웨어가 있습니다. 그것이 하는 일은 추적입니다. 픽셀 격자를 설명할 만한 곡선이 무엇일지 짐작하는 것이죠. 평평한 두 색짜리 그림에는 그럭저럭 통하고 그 밖의 것에는 값비싼 헛소리를 내놓으며, 원래 그림이 갖고 있던 것을 되찾는 일은 결코 없습니다.

픽셀이 되는 순간 달라지는 세 가지

래스터화한 SVG가 이상해 보인다면 거의 언제나 이 셋 중 하나 때문이고, 셋 다 내보낸 뒤가 아니라 내보내기 전에 알아 둘 만합니다.

글자는 그 기기에 있는 글꼴로 그려집니다. 글자가 든 SVG는 글꼴을 담고 있지 않습니다. 이름만 적어 두고 찾는 일은 렌더러에 맡기죠. 그 글꼴이 설치되어 있지 않으면 대체 글꼴이 쓰이고, 대체 글꼴은 글자 모양도 너비도 달라서 글이 다시 흐르거나 넘칠 수 있습니다. 웹 주소에서 글꼴을 가져오는 파일은 더 나쁩니다. <img>를 통해 래스터화되는 SVG는 아무것도 가져올 수 없어서, 도착하는 것이 없습니다.

해법은 모든 디자이너가 이미 아는 그것입니다. SVG를 내보내기 전에 글자를 윤곽선으로 변환하세요(일러스트레이터는 Create Outlines, 피그마는 Flatten, 잉크스케이프는 Object to Path라고 부릅니다). 글자가 도형이 되고, 글꼴은 상관없어지며, 그림은 어느 기기에서나 똑같이 보입니다. 다만 사본에 하세요. 윤곽선이 된 글자는 더 이상 글자로 고칠 수 없으니까요.

머리카락 같은 선이 회색이 되거나 사라집니다. 정한 크기에서 1픽셀이 안 되는 굵기의 선은 실선으로 그려질 수 없어서 옅게 그려집니다. 섬세한 로고를 64 픽셀로 래스터화하면 색이 빠져 보이는데 같은 파일이 512에서는 완벽해 보이는 이유입니다. 작은 크기가 요구 사항이라면 답은 다른 내보내기 설정이 아니라 획을 굵게 한 단순한 그림입니다. 파비콘이 워드마크가 아니라 심벌인 것과 같은 이유죠.

애니메이션이 멈춥니다. 움직이는 SVG는 정지 한 장으로 래스터화됩니다. 첫 프레임이 무엇이든 그것으로요. 이것을 바꾸는 내보내기 설정은 없습니다. 움직임이 필요하다면 GIF나 영상이 필요하고, 그건 다른 방식으로 만드는 것입니다.

투명도, 그리고 어느 형식을 고를지

특별한 이유가 없다면 PNG입니다. 무손실이고, 투명도를 지키며, 또렷한 가장자리의 단색 면이 여기서 잘 압축됩니다. 그림을 이루는 것이 대부분 그것이고요. 래스터화한 로고는 대개 JPEG로 했을 때보다 더 작은 PNG가 되고, 더 깨끗하기도 합니다.

JPEG에는 투명도가 아예 없습니다. 모든 투명 픽셀이 어떤 색이 되어야 하고, 아무도 골라 주지 않으면 검정이 됩니다. 사람들이 버그라고 여기는 그 검은 상자 위의 로고가 여기서 나옵니다. 게다가 바로 이런 종류의 그림에서 가장 나쁘게 드러나는 방식으로 손실입니다. 또렷한 가장자리 마다 얼룩이 고리처럼 둘러섭니다. 무언가가 JPEG를 고집할 때만 쓰세요.

WebP는 PNG가 하는 모든 것을 더 작은 파일로 하고, 요즘 브라우저는 전부 읽습니다. 쓰지 말아야 할 이유는 브라우저 다음에 벌어지는 일입니다. 오래된 소프트웨어와 일부 인쇄소, 적지 않은 업로드 양식이 아직 열지 못합니다.

PNG에 배경색을 고르는 것도 지극히 평범한 요구입니다. 투명도는 이미지가 놓일 자리의 색을 예측할 수 없을 때만 쓸모가 있습니다. 그것이 흰 페이지라는 걸 이미 안다면, 흰색 위에 눌러 두는 편이 놀랄 일 한 무더기를 피하게 해 줍니다.

내보낸 결과가 비어 있거나 이상할 때

빈 공간뿐이라면. 대개 루트 요소에 xmlns 속성이 빠진 것입니다. 그것이 없는 파일은 이미지 태그가 보기에 SVG가 아니고, 아무것도 그려지지 않습니다. 브라우저에서 파일을 열어 보는 것이 빠른 시험입니다. 브라우저에서도 아무것도 안 보인다면 문제는 변환기가 아니라 파일입니다.

그림이 왼쪽 위 구석에 작게 있다면. 파일에 width와 height는 있는데 viewBox가 없는 것입니다. 확대할 좌표계가 없어서 그림이 더 큰 캔버스 위에서 원래 단위를 그대로 유지합니다. 좋은 변환기는 viewBox를 대신 넣어 주는데, 쓰시는 것이 그러지 않는다면 루트 요소에 viewBox="0 0 width height"를 직접 넣으면 됩니다. 파일이 평범한 텍스트라 그렇게 하실 수 있습니다.

그림의 일부가 빠져 있다면. 파일 안의 무언가가 그림을 담는 대신 주소를 가리키고 있었던 것입니다. 링크로 저장된 사진, 스타일시트, 글꼴 같은 것들요. 그것을 가져오기를 거부하는 래스터라이저는 옳은 일을 하고 있고, 어딘가에서 내려받은 SVG가 만든 사람에게 보고를 보내지 못하게 막는 것도 같은 거부입니다. 그림 프로그램에서 이미지를 포함해 다시 내보내세요.

아주 큰 크기를 거부한다면. 브라우저는 캔버스가 얼마나 커질 수 있는지에 상한을 두고, 그 자리에 합의가 없습니다. 한 변이 16,000 픽셀쯤을 넘으면 아무것도 돌아오지 않고, 아이폰과 아이패드의 Safari는 약 ⁦4096 × 4096⁩에서 훨씬 일찍 포기합니다. 경고해 주는 도구는 빈 파일을 받는 사태에서 구해 주고 있는 것입니다. 브라우저가 한계에 부딪히면 오류 메시지가 아니라 그것을 내놓으니까요.

이 중 무엇에도 업로드는 필요 없습니다

SVG 래스터화는 모든 브라우저가 하루에 수천 번씩 하는 일입니다. 웹페이지에 아이콘을 그리는 바로 그 장치니까요. 작업물이 PNG로 나오자고 서버에 갔다 와야 할 기술적 이유는 없고, 여기 도구는 그걸 어디로도 보내지 않습니다. 페이지의 Content-Security-Policy가 연결 가능한 주소를 전부 적어 두는데, 그중 이 사이트의 것은 없습니다.

SVG에서는 평소보다 더 중요합니다. SVG는 그림이 아니라 문서이기 때문입니다. 스크립트와 원격 주소를 담을 수 있고, 에이전시가 보내 준 로고는 내가 쓰지 않은 파일입니다. 그런데 이미지 태그를 통해 그려지는 순간, 명세가 secure static mode라고 부르는 상태에 들어갑니다. 스크립트는 돌 수 없고 그 주소에는 결코 연결되지 않습니다. 그것을 강제하는 것은 웹사이트가 아니라 브라우저입니다.

듣기만 하는 것보다 직접 확인하고 싶다면, 페이지를 불러온 다음 인터넷을 끊고 그냥 변환해 보세요. 온라인 변환 사이트에 파일을 올려도 안전할까요?에 어떤 도구에든 해 볼 수 있는 확인 세 가지가 더 있습니다.