SVG → PNG 변환이란
SVG는 벡터(수식) 기반 이미지라 확대해도 깨지지 않지만, 일부 프로그램·플랫폼에서는 PNG 같은 래스터(픽셀) 이미지를 요구합니다. 이 도구는 SVG를 원하는 해상도의 PNG로 변환(래스터화)해 어디서나 쓸 수 있게 만들어 줍니다.
사용 방법
- ① SVG 파일을 선택하거나 끌어다 놓고, 혹은 SVG 코드를 붙여넣습니다.
- ② 출력 크기를 고릅니다. 배율(1x/2x/3x)이나 가로 픽셀을 직접 지정할 수 있습니다.
- ③ 배경을 투명 또는 흰색으로 선택합니다.
- ④ 'PNG로 변환'을 누른 뒤 'PNG 다운로드'로 저장합니다.
고해상도로 뽑으려면
SVG는 벡터이므로 배율을 2x·3x로 올리거나 가로 픽셀을 크게 지정하면 또렷한 고해상도 PNG가 만들어집니다. 인쇄나 큰 화면용 이미지가 필요하면 가로 px을 1000 이상으로 지정해 보세요. 미리보기 아래에 원본 크기와 출력 크기가 함께 표시되어 결과 해상도를 저장 전에 확인할 수 있습니다. 다만 출력 크기가 지나치게 크면 파일 용량이 커지므로, 실제 쓰임에 맞는 해상도를 고르는 것이 좋습니다.
출력 포맷과 배경
출력 포맷은 PNG·WebP·JPG 중에서 고를 수 있습니다. PNG와 WebP는 투명 배경을 지원하므로 아이콘·로고를 투명하게 저장할 때 좋고, JPG는 투명을 지원하지 않아 배경을 흰색이나 지정한 색으로 채웁니다. 배경은 투명·흰색·직접 선택 색 중에서 정할 수 있고, JPG·WebP는 저장 품질도 조절할 수 있습니다.
이런 때 사용하세요
- 아이콘·로고 — SVG 아이콘을 PNG로 바꿔 앱·문서·프레젠테이션에 넣습니다.
- SNS·썸네일 — 벡터 그래픽을 정해진 픽셀 크기의 PNG로 뽑아 업로드합니다.
- 호환성 — SVG를 지원하지 않는 프로그램에서 쓰도록 래스터 이미지로 변환합니다.
- 인쇄물 — 로고나 도형을 높은 배율로 뽑아 인쇄용 고해상도 이미지로 사용합니다.
주의점과 팁
SVG가 외부 폰트나 외부 이미지(<image href>)를 불러오는 경우, 브라우저 보안 정책 때문에 변환 결과가 비어 보일 수 있습니다. 이때는 폰트를 이미지(패스)로 변환하거나 이미지를 SVG 안에 포함하면 해결됩니다. 또한 SVG에 width/height나 viewBox가 없으면 크기를 추정하지 못하므로, 되도록 viewBox가 있는 SVG를 사용하세요. 미리보기의 체크무늬 배경은 투명 영역을 뜻합니다. 변환 전 미리보기로 그림이 제대로 나오는지 확인한 뒤 크기와 배경을 정하면, 원하는 결과를 한 번에 얻을 수 있습니다.
자주 묻는 질문
SVG 파일이 서버로 전송되나요?
아니요. 모든 변환은 사용자의 브라우저(Canvas)에서만 처리되며 SVG가 인터넷으로 업로드되지 않습니다.
크기를 키워도 깨지지 않나요?
SVG는 벡터라서 배율을 높여 변환하면 PNG가 또렷하게 출력됩니다. 2x 또는 3x, 혹은 원하는 가로 픽셀을 지정하면 고해상도 PNG를 얻을 수 있습니다.
어떤 포맷과 배경으로 저장되나요?
출력 포맷은 PNG, WebP, JPG 중에서 고를 수 있고 배경은 투명·흰색·직접 지정 색 중에서 선택합니다. JPG는 투명을 지원하지 않아 배경이 흰색 등으로 채워집니다.
SVG 코드를 붙여넣어도 되나요?
네. 파일을 올리는 대신 SVG 코드를 붙여넣어도 되고, 파일을 선택하면 코드가 자동으로 채워집니다. 코드를 수정하면 미리보기에 바로 반영됩니다.
변환 결과가 비어 있거나 깨져요.
외부 폰트·외부 이미지(<image href>)를 참조하는 SVG는 브라우저 보안 정책상 비어 보일 수 있습니다. 또한 width/height 또는 viewBox가 없으면 크기를 추정하지 못하니 SVG에 viewBox를 넣어 주세요.