무료 변환기

SVG에서 PNG로 변환기

벡터 SVG 파일을 고품질 래스터 PNG 이미지로 변환합니다. 브라우저에서 출력 크기와 배경색을 쉽게 사용자 정의하세요.

여기에 SVG를 드래그 앤 드롭하세요.

최대 50MB까지 지원

또는

이 도구에 대하여

SVG(Scalable Vector Graphics)는 이미지를 품질 저하 없이 어떤 크기로든 확장되는 기하학적 기본 요소(경로, 모양, 텍스트, 그라데이션)의 집합으로 설명합니다. PNG는 단일 직사각형 픽셀 격자를 고정된 해상도로 저장합니다. SVG를 PNG로 변환하는 것은 래스터화 단계입니다. SVG의 그리기 명령은 선택한 픽셀 크기에서 평가되고 결과 비트맵은 PNG로 인코딩됩니다. 지정한 크기에서는 출력이 선명해 보이지만 크기를 확대하면 픽셀화됩니다.

이 변환기는 브라우저에 내장된 SVG 엔진을 사용하여 SVG를 렌더링합니다. SVG는 이미지 요소에 로드되고, 선택한 출력 크기로 HTML5 캔버스에 그려지며, canvas.toBlob을 통해 PNG로 내보내집니다. 브라우저가 래스터화를 수행하기 때문에 복잡한 SVG 기능(그라디언트, 필터, 마스크, 정적 프레임으로서의 애니메이션)이 실제 웹페이지에서와 동일한 방식으로 렌더링됩니다.

SVG를 PNG로 변환할 때 가장 중요한 결정은 대상 크기입니다. SVG는 해상도에 독립적이므로 실제 사용량과 일치하는 PNG 크기를 선택하면 과도한 프로비저닝(썸네일 크기 아이콘의 대용량 파일) 및 과소 프로비저닝(나중에 확대할 때 출력이 흐릿함)을 방지할 수 있습니다. 일반적인 대상: 아이콘의 경우 32×32 또는 64×64, 로고의 경우 256×256 또는 512×512, 히어로 그래픽의 경우 1024×1024, 레티나 품질 자산의 경우 2048×2048입니다.

SVG를 PNG로 변환하는 이유

SVG는 웹과 최신 디자인 도구에는 훌륭하지만 다른 많은 상황에는 좋지 않습니다. 이메일 클라이언트는 SVG를 일관되지 않게 렌더링합니다. 일부는 보안 위험으로 이를 차단합니다. 이전 사무용 소프트웨어, 특정 CMS, 타사 서비스 및 거의 모든 사진 인쇄 파이프라인은 SVG를 전혀 허용하지 않습니다. PNG로 변환하면 선택한 크기에서 동일하게 보이는 보편적으로 허용되는 래스터가 생성됩니다.

또한 PNG는 수신자의 SVG 렌더러에 의존하지 않고 사무실 문서, 슬라이드 데크 및 PDF에 안정적으로 포함됩니다. 여러 플랫폼에서 일관되게 표시되어야 하는 로고와 그래픽의 경우 PNG가 더 안전한 선택입니다. 비록 SVG가 애초에 SVG를 매력적으로 만드는 해상도 독립성을 잃더라도 말입니다.

사용 방법

대상 크기를 선택하고 렌더링하십시오. 브라우저가 래스터화를 수행합니다.

  1. SVG 파일 업로드: SVG를 업로드 영역으로 드래그하거나 클릭하여 찾아보세요. 일반적인 SVG는 1MB 미만이지만 최대 50MB의 파일이 지원됩니다. 자체 포함된 SVG가 가장 잘 작동합니다. xlink:href를 통해 외부 이미지를 원격 URL로 참조하는 SVG는 불완전하게 렌더링될 수 있습니다.
  2. 출력 크기를 선택하세요: 기본값은 SVG의 기본 viewBox 크기이지만 어떤 픽셀 크기로도 재정의할 수 있습니다. 실제 사용량에 맞는 크기를 선택하세요. 32×32로 표시되는 아이콘에 대해 4K PNG를 생성하지 마세요.
  3. 렌더링: 브라우저는 SVG를 구문 분석하여 요청된 크기로 캔버스에 그린 다음 캔버스를 PNG로 내보냅니다. 필터가 있거나 경로 수가 많은 복잡한 SVG는 시간이 걸릴 수 있습니다. 간단한 아이콘이 즉시 렌더링됩니다.
  4. PNG 다운로드: 파일을 저장합니다. SVG(그려진 모양 외부의 모든 것)의 투명도는 PNG에서 알파 채널로 유지됩니다.

일반적인 사용 사례

기술적인 세부사항

SVG(W3C 권장 사항)는 경로, 기본 모양(직사각형, 원, 타원, 선, 다각형, 폴리라인), 텍스트, 그라디언트(linearGradient, RadialGradient), 필터, 마스크 및 클립 경로에 대한 요소가 포함된 XML 기반 벡터 형식입니다. 브라우저는 XML을 구문 분석하고, DOM을 구축하고, CSS를 적용하고, 페이지 렌더링 중에 결과를 래스터화합니다.

이 변환기는 SVG를 HTMLImageElement(브라우저의 일반적인 SVG 이미지 렌더링 경로를 트리거함)로 로드한 다음 drawImage를 통해 캔버스에 그립니다. canvas.toBlob('image/png')를 사용하여 캔버스를 PNG로 내보냅니다. 출력의 정확한 픽셀은 SVG가 브라우저 탭에서 동일한 크기로 렌더링하는 것과 일치합니다.

극단적인 경우: foreignObject를 사용하는 SVG는 Image 요소를 통해 사용될 때 항상 지원되지는 않습니다. 외부 리소스(다른 도메인에 대한 xlink:href)를 참조하는 SVG는 CORS로 인해 로드되지 않을 수 있습니다. SMIL 애니메이션과 JavaScript 기반 애니메이션은 초기 프레임으로만 렌더링됩니다.

모범 사례

자주 묻는 질문

SVG를 PNG로 변환하면 품질이 떨어지나요?
벡터에서 래스터로의 변환은 이미지가 픽셀 기반이 되며 더 이상 무한정 확장할 수 없음을 의미합니다. PNG가 의도한 디스플레이 크기에서 선명하게 보이도록 고해상도를 선택합니다.
PNG 형식은 무엇에 사용됩니까?
PNG(Portable Network Graphics)는 주로 투명도, 스크린샷, 로고, 아이콘이 포함된 그래픽에 사용됩니다.
알아야 할 제한 사항이 있나요?
최대 50MB의 파일이 지원됩니다. 매우 크거나 복잡한 파일은 처리하는 데 시간이 더 오래 걸릴 수 있습니다. 모든 변환은 브라우저에서 이루어지므로 처리 속도는 장치에 따라 다릅니다.
변환 중에 내 이미지는 비공개로 유지되나요?
예. SVG 파일은 Canvas API 및 JavaScript를 사용하여 브라우저 내에서 완전히 처리됩니다. 아무 서버에도 업로드되지 않습니다. 파일은 장치에서 변환기로 직접 이동한 다음 다시 장치로 돌아옵니다.
텍스트가 텍스트로 렌더링됩니까, 아니면 경로로 렌더링됩니까?
텍스트는 출력 PNG에서 픽셀로 래스터화됩니다. 출력은 더 이상 검색하거나 선택할 수 없습니다. SVG가 브라우저에서 사용할 수 없는 글꼴을 사용하는 경우 텍스트가 대체 글꼴로 렌더링될 수 있습니다. 보장된 모양을 위해 렌더링하기 전에 텍스트를 SVG의 경로로 변환합니다.
내 SVG가 서버에 업로드됩니까?
아니요. SVG 구문 분석 및 렌더링은 브라우저에서 발생합니다. PNG 인코딩은 브라우저에서 발생합니다. 파일은 장치를 떠나지 않습니다.
변환된 PNG가 비어 있는 이유는 무엇입니까?
일반적인 원인: SVG는 CORS로 인해 로드에 실패한 외부 이미지를 참조합니다. SVG는 이미지 요소 렌더링 경로(외부 객체, 특정 필터)에서 지원하지 않는 기능을 사용합니다. SVG에는 0차원 viewBox가 있습니다. 변환하기 전에 브라우저에서 SVG를 직접 열어서 렌더링되는지 확인하세요.
스크립트에서 SVG를 PNG로 변환할 수 있나요?
예. 일괄 작업의 경우 Sharp 또는 Puppeteer를 사용하는 Node.js 설정은 브라우저와 유사한 충실도로 SVG를 PNG로 렌더링합니다. 이 도구는 아무것도 설치하지 않고 브라우저에서 일회성 변환을 위한 것입니다.