SVG PNG 변환 — 배율 지정, 투명 배경 그대로
SVG를 배율·너비를 정해 PNG·JPG·WebP로 저장하는 브라우저 변환기
브라우저에서 처리 · 서버로 전송되지 않음
SVG 파일을 여기로 끌어다 놓으세요
SVG 파일 한 개(10MB까지)를 PNG, JPG, WebP로 바꿔요. 파일은 브라우저 밖으로 나가지 않아요.
PNG와 WebP는 투명을 그대로 담을 수 있어요. 아이콘은 2~4배로 저장하면 고해상도 화면에서도 선명해요.
SVG → PNG 변환이란?
SVG(벡터 그림)를 PNG 같은 일반 이미지로 바꿔 주는 도구예요. SVG는 아무리 키워도 깨지지 않는 장점이 있지만, 메신저, 문서 프로그램, SNS, 일부 쇼핑몰 업로드 창에서는 받지 않는 경우가 많아요. 이 도구로 원하는 배율이나 너비를 정해 PNG로 저장하면 어디서나 쓸 수 있어요. 파일을 올리거나 SVG 코드를 직접 붙여 넣을 수 있고, 투명 배경을 그대로 살릴 수 있어요.
사용법
- 파일을 골라 SVG 파일을 끌어다 놓거나, 코드 붙여넣기를 골라
<svg>로 시작하는 코드를 넣어요. - 저장 형식에서 PNG, JPG, WebP 중 하나를 골라요.
- 크기에서 1×~4× 배율을 고르거나 너비를 px로 직접 입력해요.
- 배경을 투명으로 둘지 색으로 채울지 정해요. JPG는 항상 배경색을 채워요.
- 미리보기를 확인한 뒤 PNG로 저장을 눌러요.
변환 기준
- 원래 크기: 루트
<svg>의 width·height(px, pt, mm, cm, in 단위는 CSS 기준으로 px 환산)를 쓰고, 하나만 있으면 viewBox 비율로 나머지를 계산해요. 퍼센트(%)는 크기로 쓰지 않아요. - 배율 적용: 저장할 크기로 width·height를 바꾸고, viewBox가 없으면 원래 크기로 viewBox를 만들어 그림 전체가 함께 커지게 해요.
- 그리기: 브라우저가 SVG를 이미지로 그린 뒤 캔버스에 옮겨 저장해요. 이 방식에서는 외부 파일을 불러오지 않고 스크립트를 실행하지 않아요(SVG 이미지 보안 규칙).
- 경고: 외부 파일 참조, 글자(글꼴), foreignObject, 스크립트, 애니메이션이 있으면 미리 알려 줘요. 애니메이션은 첫 장면만 저장돼요.
- 크기 한도: 한 변 16,384px, 아이폰·아이패드는 16,777,216화소까지이고 넘으면 줄여서 저장해요.
예시
| SVG | 설정 | 결과 |
|---|---|---|
| icon.svg (viewBox 0 0 24 24) | 4× PNG, 투명 | icon.png 96×96, 배경 투명 |
| logo.svg (width 200, height 80) | 너비 1000px | logo.png 1000×400 |
| chart.svg (크기 정보 없음) | 2× JPG, 흰 배경 | chart.jpg 600×300 |
여러 크기의 웹사이트 아이콘이 필요하면 파비콘 생성기를, PNG를 다른 형식으로 다시 바꾸려면 이미지 형식 변환 도구를 써 보세요.
자주 묻는 질문
몇 배로 저장해야 선명한가요?
웹 아이콘이나 로고는 2배가 무난하고, 인쇄물이나 고해상도 화면용이면 3~4배를 권해요. 정확한 픽셀이 필요하면 '너비 직접 입력'으로 예를 들어 1024px처럼 정하면 높이는 비율에 맞춰 정해져요.
변환했더니 글꼴이 달라졌어요.
이미지로 그릴 때 브라우저는 SVG 밖의 글꼴 파일을 가져오지 않아서, 글자는 내 기기에 설치된 글꼴로 그려져요. Illustrator, Figma, Inkscape 같은 편집기에서 글자를 윤곽선(path)으로 바꾼 뒤 넣으면 디자인 그대로 나와요.
이미지 일부가 빠져서 나와요.
SVG가 외부 파일(다른 주소의 이미지, CSS)을 참조하면 보안상 불러오지 않아서 그 부분이 비어요. 도구가 어떤 파일인지 목록으로 알려 주니, 해당 파일을 SVG 안에 data URI(data:로 시작하는 주소)로 넣어 다시 시도해 보세요.
크기 정보가 없는 SVG는 어떻게 되나요?
width·height가 없으면 viewBox 크기를, 둘 다 없으면 브라우저 기본값인 300×150px을 원래 크기로 보고 배율을 곱해요. 화면에 어떤 기준을 썼는지 표시돼요.
SVG 코드가 서버로 전송되나요?
아니요. 파일을 읽고 그리는 일 모두 내 브라우저 안에서 이루어져요.
관련 도구
이미지 형식 변환
7가지 이미지 형식을 서로 바꾸고 일괄 ZIP으로 받는 브라우저 변환기
파비콘 만들기
이미지나 글자로 favicon.ico, 여러 크기 PNG, manifest와 HTML 코드를 만드는 브라우저 도구
이미지 Base64 변환
이미지를 Base64·데이터 URI·CSS·HTML 코드로 바꾸고 Base64를 이미지로 복원하는 브라우저 도구
PNG → JPG 변환
PNG를 JPG로 바꿔 용량을 줄이는 브라우저 변환기, 투명 배경색과 품질 선택
이미지 → SVG 변환
비트맵 이미지를 색 수·디테일 슬라이더로 조절해 SVG 벡터로 바꾸는 변환기