it365

SVG PNG 변환

SVG를 PNG 이미지로 빠르게 변환하세요. 투명 배경 유지, 여백 조절, 그래픽 색상 변경, 불필요한 공백 트리밍 및 일괄 내보내기를 지원합니다.

파일을 끌어다 놓아 SVG 가져오기
단일 파일 또는 여러 SVG 파일의 드래그 앤 드롭 지원
총 {{ images.length }}개의 이미지
여기를 클릭하거나 SVG 파일을 끌어다 놓으세요
대량 가져오기 지원, 브라우저 내 즉각 렌더링, 서버 업로드 없이 100% 안전한 보안 유지
출력 형식:
품질: {{ Math.round(globalQuality * 100) }}%
#{{ idx + 1 }} .{{ globalFormat }}
태그 크기: {{ img.specified.width || '미지정' }} × {{ img.specified.height || '미지정' }}
픽셀 크기: {{ img.absolute.width ? (img.absolute.width + 'px') : '-' }} × {{ img.absolute.height ? (img.absolute.height + 'px') : '-' }}
ViewBox: {{ img.viewBox.width ? (img.viewBox.x + ' ' + img.viewBox.y + ' ' + img.viewBox.width + ' ' + img.viewBox.height) : '없음' }}
경계 상자: {{ img.contents ? (Math.round(img.contents.width) + ' × ' + Math.round(img.contents.height)) : '-' }}
SVG 소스 코드 편집 (수정 시 자동으로 다시 파싱 및 렌더링됩니다):
⚠️ {{ img.errorMessage }}
출력 크기 (px):
×
외부 여백:
px
여백 자르기:
맞춤 모드:
배경색:
그래픽 색상:
{{ img.width }} × {{ img.height }} px

SVG를 PNG로 변환하고 투명 배경을 유지하는 방법

프론트엔드 개발, UI 디자인, 일러스트 작업 및 일상 업무에서 SVG 벡터 그래픽은 무한한 확장성, 선명한 렌더링, 극도로 작은 용량 덕분에 아이콘과 로고의 표준으로 자리잡았습니다. 하지만 소셜 미디어 게시, 프레젠테이션 슬라이드 제작, 문서 삽입, 레거시 시스템 호환 등의 목적에서는 범용 투명 PNG 비트맵이 가장 안정적인 선택입니다. 이 글에서는 SVG를 깨끗한 투명 PNG로 변환하는 핵심 원리, 단계별 절차 및 자주 발생하는 문제 해결 팁을 안내합니다.

1. SVG와 PNG의 투명도 처리 원리

SVG(Scalable Vector Graphics)는 본질적으로 XML 기반의 벡터 마크업 언어입니다. 표준 사양에 따르면 코드 내에 단색 배경 도형(예: <rect fill="#ffffff" ...>)이 명시적으로 작성되지 않는 한, SVG 루트 캔버스는 기본적으로 투명합니다.

반면 PNG(Portable Network Graphics)는 래스터 비트맵 형식으로, 8비트 알파 투명 채널을 갖춘 32비트 RGBA 색상을 지원하여 256단계의 매끄러운 반투명을 표현할 수 있습니다. SVG를 PNG로 변환할 때 불필요한 배경을 채우지 않고 알파 채널을 지원하는 HTML5 Canvas로 래스터화하면 원본의 완벽한 투명도가 그대로 유지됩니다.

2. SVG를 고해상도 투명 PNG로 변환하는 5단계

1
SVG 벡터 파일 가져오기

상단의 "SVG 업로드" 버튼을 클릭하거나 하나 이상의 SVG 파일을 페이지에 드래그 앤 드롭하세요. 브라우저 내에서 즉각 벡터 속성과 규격을 분석하며 단일 및 대량 파일 가져오기를 모두 지원합니다.

2
배경색 칸 비워두기

각 이미지 카드 설정에서 "배경색" 입력란을 비워두면 완전한 투명도가 유지됩니다. 체커보드 패턴이나 어두운 미리보기를 통해 외곽선과 투명 영역을 손쉽게 확인할 수 있습니다.

3
출력 해상도 지정하기

용도에 맞게 출력 너비와 높이를 조정하세요(예: 512px, 1024px 또는 레티나 디스플레이용 2048px). 비율 잠금을 활성화해 두면 왜곡이나 비대칭 확대/축소를 방지할 수 있습니다.

4
공백 잘라내기 및 여백 조정

원본 SVG 뷰포트에 여분의 빈 공간이 많다면 "불필요한 공백 트리밍"을 선택하여 그래픽 경계를 자동으로 감지하고 타이트하게 크롭하거나, "외부 여백"을 조절해 패딩을 확보하세요.

5
투명 PNG 이미지 내보내기

"PNG 다운로드"를 클릭해 무손실 투명 비트맵을 저장하거나, "PNG 복사"로 Figma, Sketch, Photoshop, 메신저 등에 바로 붙여넣기 하세요. 다수의 파일인 경우 "ZIP 압축 다운로드"를 이용하세요.

3. 변환된 PNG에 검은색이나 흰색 배경이 생기는 이유는?

기존 프로그램으로 SVG를 변환할 때 배경이 검은색이나 흰색 단색으로 채워지는 현상이 자주 발생합니다. 대표적인 원인과 대처법은 다음과 같습니다:

01
잘못된 포맷 선택

JPEG/JPG 포맷은 알파 투명 채널을 지원하지 않으므로 투명 픽셀이 자동으로 흰색이나 검은색으로 채워집니다. 투명 배경이 필요할 때는 반드시 PNG나 WebP 포맷을 선택하세요.

02
SVG 내부에 포함된 배경 사각형

디자인 도구에서 내보낸 일부 벡터 파일에는 최하단에 배경 도형(예: <rect width="100%" height="100%" fill="#fff"/>)이 포함되어 있을 수 있습니다. 본 도구의 "소스"를 클릭하여 확인하고 해당 태그를 삭제하세요.

03
이미지 뷰어 자체의 배경 표시

일부 운영체제의 기본 이미지 뷰어는 투명 PNG를 검은색 또는 흰색 창 배경 위에 표시합니다. 디자인 프로그램이나 웹 브라우저에서 열어 실제 투명 상태인지 확인해 보세요.

4. 자주 묻는 질문 (FAQ)

변환된 PNG 이미지를 확대하면 화질이 깨지나요?
래스터 비트맵은 설정된 픽셀 규격 이상으로 확대하면 흐려집니다. 변환 전에 필요한 최대 해상도(예: 1024×1024 또는 4096×4096)를 직접 지정하여 내보내는 것을 권장합니다. 본 도구는 벡터 원본 코드로부터 직접 래스터화하므로 언제나 매우 선명합니다.
투명도를 유지하면서 수십 개의 SVG 아이콘을 일괄 변환할 수 있나요?
네, 가능합니다. 가져온 모든 파일은 기본적으로 투명 배경이 유지됩니다. "일괄 동기화 편집"을 켜면 한 번의 클릭으로 모든 아이콘의 크기, 맞춤 모드, 여백을 통일하고 ZIP 압축 파일로 일괄 저장할 수 있습니다.
내 벡터 파일이 외부 서버로 업로드되나요?
전혀 업로드되지 않습니다. 모든 변환 연산은 브라우저 내부(HTML5 Canvas 및 Web API)에서만 실행됩니다. 고객님의 벡터 파일은 외부 서버로 전송되지 않으므로 개인정보와 데이터 보안이 완벽히 보장됩니다.