SVG를 PNG로 변환 - 무료, 원하는 크기, 브라우저에서

SVG는 그림이 아니라 그리기 명령의 모음입니다. 어떤 크기에서도 선명한 이유가 그것입니다. 표시될 때마다 도형이 다시 계산되니까요. 이것을 PNG로 만든다는 것은 그 명령을 단 한 번, 하나의 크기로 실행해 결과를 픽셀 격자에 얼려 넣는 일입니다. 이 형식의 가장 큰 장점을 내주는 것이므로, 대신 무엇을 얻는지 분명히 해 둘 가치가 있습니다.

SVG를 PNG로 변환하는 방법

1. 1 .svg 파일을 업로드 영역에 놓으세요.
2. 2 출력 너비를 정하세요. 1x, 2x, 4x 버튼은 파일에 적힌 크기를 기준으로 계산합니다. 크기가 없으면 1024픽셀에서 시작합니다.
3. 3 ‘변환하기’를 누르고 PNG를 내려받으세요. 투명한 영역은 그대로 투명합니다.

고른 크기가 곧 한계가 됩니다

이 페이지에서 실제로 내릴 결정은 이것 하나뿐입니다. SVG에는 되돌아갈 원본 해상도가 없으므로, 입력한 너비가 그 이미지가 도달할 수 있는 가장 선명한 상태입니다. 나중에 PNG를 키우면 다른 래스터와 똑같이 흐려집니다. 안전한 습관은 표시할 크기의 두 배로 내보내는 것입니다. 고밀도 화면까지 감당할 수 있으니까요. 그리고 나중에 더 크게 필요할 수 있는 것은 SVG 원본을 보관해 두세요. 파일에 자체 너비가 없으면 1024픽셀에서 시작합니다. 이는 합리적인 기본값일 뿐, 의미 있는 원본 크기가 아닙니다.

PNG가 정말로 필요한 경우

여전히 SVG를 받지 않는 곳이 많고, 대개는 그럴 만한 이유가 있습니다. SVG는 스크립트를 담을 수 있어서, 낯선 사람의 업로드를 받는 시스템은 아예 거부하는 경우가 흔합니다. 가장 흔한 사례는 소셜 미리보기 이미지입니다. og:image와 트위터 카드는 래스터를 원합니다. 그 밖에도 이메일 템플릿, 앱스토어와 마켓플레이스 등록물, 인쇄 작업 흐름, 오래된 디자인 도구, 게임과 캔버스 자산, 그리고 주변 레이아웃을 짜기 위해 고정된 픽셀 크기가 필요한 모든 것이 있습니다. 이 모든 경우 제약은 받는 쪽에 있지, 당신의 파일에 있지 않습니다.

글꼴과 외부 파일은 따라오지 않습니다

안전을 위해 브라우저는 SVG를 샌드박스에서 렌더링합니다. 스크립트는 실행되지 않고 외부 리소스도 불러오지 않습니다. 옳은 동작이지만 여기서는 눈에 보이는 결과가 따릅니다. SVG가 웹폰트를 참조하면 글자는 시스템 글꼴로 대체되고 모양이 어긋납니다. 외부 이미지를 링크했다면 그 이미지는 아예 나타나지 않습니다. 주변 페이지의 CSS에 기대고 있었다면 그 스타일은 사라집니다. 해결책은 변환 전에 파일을 자체 완결형으로 만드는 것입니다. 글자를 윤곽선으로 변환하고 이미지를 embed하세요. 이는 SVG를 누군가에게 넘기기 전에도 어차피 해야 할 일입니다.