SVG → PNG 변환

SVG → PNG 변환, 어떻게 쓰나요

SVG 파일을 화면에 올리거나 클릭해서 불러온 뒤, 출력 배율(1x~4x)을 고르고 'PNG로 저장'을 누르면 PNG 파일로 저장됩니다. 배율 버튼에는 저장될 결과 픽셀 크기가 함께 표시되고, 결과 카드에는 원본 SVG 크기와 최종 출력 크기가 나란히 보입니다. 모든 처리는 브라우저 안에서 이뤄지며 이미지가 서버로 업로드되지 않습니다. SVG는 좌표와 도형 명령으로 그려지는 벡터 형식이라 원본에 고정된 픽셀 수가 없고, PNG는 픽셀 격자로 저장되는 래스터 형식입니다. 그래서 변환할 때 "원본 크기의 몇 배로 그릴지"를 정해야 하며, 이 도구는 그 배율을 버튼으로 고르는 방식입니다.

작동 원리 — viewBox와 출력 배율

변환기는 SVG를 <canvas>에 그린 뒤 그 캔버스를 PNG로 추출합니다. 이때 최종 화질을 좌우하는 것이 SVG의 width/height 또는 viewBox에 대한 출력 배율입니다. 결과 픽셀 크기는 원본 SVG 크기 × 선택한 배율로 계산되므로, 예를 들어 128×128로 정의된 아이콘을 4x로 저장하면 512×512 PNG가 나옵니다. 벡터라서 이 과정에서 계단현상 없이 선명하게 확대됩니다. 아래 표의 권장 크기를 목표로 삼아, 원본 크기에 맞는 배율을 고르면 됩니다.

이럴 때 씁니다

디자이너에게 받은 SVG 로고를 카카오톡·인스타그램처럼 SVG를 지원하지 않는 곳에 올려야 할 때, Figma·Illustrator에서 내보낸 벡터를 PPT나 워드에 붙일 때, 웹 아이콘을 앱 스토어용 정사각 PNG로 바꿀 때 유용합니다. 특히 SVG가 그대로 표시되지 않는 옛 브라우저나 이메일 클라이언트 대응용으로 PNG 대체본을 만들 때 자주 씁니다.

실전 팁

배경을 투명하게 유지하려면 SVG에 흰색 배경 사각형이 들어있지 않은지 확인하세요. PNG는 투명도(알파 채널)를 지원하므로 원본 SVG가 투명하면 결과도 투명하게 나옵니다. 외부 폰트를 쓴 텍스트 SVG는 브라우저에 그 폰트가 없으면 다른 글꼴로 대체되어 렌더링될 수 있으니, 텍스트는 미리 '윤곽선(패스)으로 변환'해 두면 안전합니다. 또 필요한 최종 크기보다 넉넉하게 뽑는 편이 낫습니다. PNG를 나중에 키우면 흐려지지만, 큰 PNG를 줄이는 것은 품질 손실이 거의 없습니다.

자주 묻는 질문