SVG to PNG 변환기

SVG 코드를 붙여넣거나 .svg 파일을 업로드한 후 1×, 2×, 3× 또는 4× 스케일로 고해상도 PNG로 내보내요. 투명 또는 단색 배경 중 선택해요. 모든 과정이 브라우저에서 진행되며 서버로 전송되지 않아요.

작동 방식: SVG 코드를 붙여넣거나 .svg 파일을 업로드한 후 스케일 배수와 배경을 선택하고 Convert를 클릭해요. Canvas API가 벡터를 대상 해상도로 렌더링하고 손실 없는 PNG로 내보내요. 모든 데이터는 브라우저에만 남아요.

PNG 미리보기가 여기에 표시돼요

SVG란 무엇이며 왜 PNG로 변환하나요?

SVG(Scalable Vector Graphics)는 도형, 경로, 텍스트를 수학적으로 설명하는 XML 기반 포맷이에요. 벡터는 해상도에 독립적이므로 SVG는 16px 파비콘부터 4K 광고판까지 어떤 크기에서든 선명하게 보여요. 하지만 많은 상황에서는 여전히 래스터 이미지가 필요해요: 이메일 클라이언트, 인라인 SVG를 지원하지 않는 앱, 소셜 미디어 썸네일, 또는 PNG나 JPEG만 허용하는 이미지 처리 파이프라인 말이에요. SVG를 PNG로 변환하면 이 격차를 해소할 수 있고, 정확히 필요한 크기의 벡터 스냅샷을 픽셀 완벽하게 얻을 수 있어요.

Canvas API를 사용한 래스터화 원리

이 도구는 브라우저의 네이티브 Canvas API를 사용하여 서버 측 처리 없이 SVG를 래스터화해요. 변환 파이프라인은 세 단계로 작동해요: 먼저 SVG 문자열이 Object URL로 변환되어 HTMLImageElement에 로드돼요. 둘째, HTML5 Canvas가 대상 크기(원본 크기에 선택한 스케일 팩터를 곱한 값)로 생성돼요. 셋째, 이미지가 drawImage()를 사용하여 Canvas에 그려지고 canvas.toBlob()을 통해 PNG Blob으로 내보내져요. 전체 과정은 메모리에서 실행되며 출력 URL은 로컬 Blob URL이에요 — 어떤 네트워크 요청도 발생하지 않아요.

고DPI 화면을 위한 SVG 스케일링

현대 디스플레이(Retina, HiDPI, OLED)는 2배 이상의 디바이스 픽셀 비율을 사용해요. 즉, CSS 픽셀이 2개 이상의 물리적 픽셀에 매핑돼요. SVG를 1×로 내보내고 2× 화면에서 표시하면 PNG가 약간 흐릿하게 보여요. 2×로 내보내면 픽셀 밀도가 두 배인 PNG가 생성되어 모든 HiDPI 디스플레이에서 선명하게 렌더링돼요. 인쇄 품질 출력이 필요하거나 여러 용도로 이미지를 축소할 계획이라면 3× 또는 4×를 사용해요. 이 도구의 스케일 배수는 렌더링 전 Canvas 크기를 직접 제어해요.

최적의 변환 결과를 위한 팁

  • SVG에 항상 viewBox를 정의해서 도구가 자동으로 너비와 높이를 파악할 수 있도록 해요
  • 현대 화면의 웹 에셋에는 2× 스케일을 사용해요 — 최소한의 파일 크기 비용으로 해상도를 두 배로 늘려요
  • Transparent 배경을 선택하여 PNG의 알파 채널을 유지해서 색상 배경에서 사용할 수 있게 해요
  • SVG가 외부 폰트를 사용하면 변환 전에 base64 데이터 URI로 <style> 블록 내에 삽입해요
  • 복잡한 SVG에서 매우 큰 스케일 값(4×)을 피해요 — Canvas 렌더링은 CPU 바운드이고 느릴 수 있어요
  • 모든 <image> href를 base64로 인라인화해서 래스터화 중 cross-origin 오류를 피해요