SVG를 PNG로 변환하는 법, 출력 크기는 어떻게 정해야 할까

SVG 파일을 받았는데 막상 문서나 발표 자료에 넣으려니 PNG가 필요한 상황이 있습니다. 그런데 변환 도구를 열면 거의 항상 "너비"나 "배율" 같은 숫자를 물어봅니다. 사진을 다른 형식으로 바꿀 때는 묻지 않던 질문이라 당황스럽습니다.

이 숫자를 왜 정해야 하는지부터 알면 변환이 훨씬 쉬워집니다. 결론부터 말하면 SVG는 정해진 픽셀 크기가 없는 형식이라, PNG로 바꾸는 순간 "몇 픽셀짜리로 그릴지"를 사람이 알려 줘야 하기 때문입니다.

 

왜 PNG로 바꿀 때만 크기를 물을까

PNG 같은 사진 형식은 작은 점(픽셀)을 격자에 채워 그림을 만듭니다. 그래서 파일 안에 이미 "가로 800, 세로 600" 같은 픽셀 수가 들어 있습니다. JPG를 PNG로 바꿀 때 크기를 안 물어보는 이유가 여기 있습니다. 원본에 이미 픽셀 수가 정해져 있으니까요.

SVG는 다릅니다. SVG는 그림을 점이 아니라 "선을 어디서 어디로 긋고 색을 칠하라"는 도형 설명으로 담습니다. 그래서 본질적으로 픽셀 수가 없고, 화면 크기에 맞춰 그때그때 다시 그립니다. PNG로 옮기는 순간 이 설명을 실제 픽셀 격자에 찍어 내야 하는데, 격자가 몇 칸짜리인지는 SVG 안에 없으므로 변환할 때 정해 주는 것입니다.

이 "도형 설명을 픽셀로 찍어 내는 일"을 래스터화라고 부릅니다. 쉽게 말해 도면을 보고 모눈종이에 실제로 색칠하는 작업입니다.

---

SVG 안에 크기 힌트가 있긴 합니다

SVG 파일을 메모장으로 열면 첫 줄에 이런 속성이 보일 때가 많습니다.

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1565C0" />
</svg>

여기서 width와 height는 "기본으로 이 정도 크기로 보여 달라"는 힌트이고, viewBox는 도형들이 그려진 좌표 공간의 범위입니다. 많은 변환 도구가 width와 height를 기본값으로 가져다 씁니다.

문제는 이 값이 작게 적혀 있으면 변환 결과도 작고 흐릿하게 나온다는 점입니다. 그래서 또렷한 PNG가 필요하면 도구에서 너비를 직접 더 크게 지정하거나, 배율(예: 2배, 4배)을 올려서 뽑아야 합니다. SVG는 크게 뽑을수록 더 선명해지고, 그만큼 파일 용량도 커집니다.

참고로 width나 height 없이 viewBox만 있는 SVG도 있습니다. 이런 파일은 기본 크기 힌트가 없어 도구마다 다른 크기로 처리하므로, 출력 픽셀 수를 직접 지정하는 편이 안전합니다.

---

변환 방법 네 가지를 비교하면

상황에 따라 손에 맞는 방법이 다릅니다. 설치 여부, 크기 조절의 정밀함, 개인정보 측면을 기준으로 정리했습니다.

방법	설치	크기 지정	유의점
웹브라우저로 열어 캡처	불필요	화면 확대 배율에 의존	가장 간단하나 픽셀 수를 정밀하게 못 맞춤
무료 벡터 편집 도구로 내보내기	필요	너비/높이/배율 정밀 지정	품질이 가장 안정적, 처음엔 메뉴가 낯섦
온라인 변환 사이트	불필요	도구에 따라 다름	파일이 외부 서버로 올라감, 개인정보 주의
명령행 도구(개발자용)	필요	옵션으로 정밀 지정	여러 파일 일괄 변환에 강함

표의 특성은 일반적인 경향이며, 실제 동작과 옵션 이름은 도구와 버전에 따라 다를 수 있습니다.

방법별로 좀 더 풀어 보면

1. 웹브라우저로 열어 캡처하기. SVG 파일을 브라우저 창에 끌어다 놓으면 바로 그림이 보입니다. 화면을 확대한 뒤 캡처하면 PNG로 저장할 수 있습니다. 가장 빠르지만, 출력 픽셀 수를 정확히 맞추기 어렵고 화면 밖으로 넘치는 큰 그림에는 불리합니다.

2. 무료 벡터 편집 도구로 내보내기. 벡터 그래픽을 다루는 무료 편집 프로그램들은 대부분 PNG 내보내기에서 너비와 높이를 픽셀 단위로 입력하거나 배율을 고를 수 있습니다. 품질과 크기를 가장 정밀하게 다룰 수 있어, 또렷한 결과가 필요할 때 권합니다. 특정 제품을 단정해 추천하지는 않겠습니다. "SVG PNG 내보내기"를 지원하는 무료 벡터 편집기를 찾으면 됩니다.

3. 온라인 변환 사이트. 설치 없이 파일을 올리면 바꿔 줍니다. 다만 파일이 외부 서버로 전송되므로, 회사 자료나 개인정보가 담긴 이미지는 올리지 않는 편이 안전합니다. 공개해도 되는 그림에만 쓰는 것을 권합니다.

4. 명령행 도구(개발자라면). 명령 한 줄로 변환하고 옵션으로 출력 크기를 지정하는 도구들이 있습니다. 폴더 안 SVG를 한꺼번에 PNG로 바꾸는 일괄 작업에 특히 유리합니다. 도구별로 명령과 옵션이 다르니 해당 도구 안내를 확인해 쓰면 됩니다.

투명 배경은 그대로 살아날까

SVG에 배경색이 칠해져 있지 않으면 그 부분은 비어 있는 상태입니다. PNG는 투명을 표현할 수 있는 형식이라, 변환할 때 배경을 투명으로 두면 빈 부분이 그대로 비칩니다.

다만 도구에 따라 빈 배경을 흰색으로 채워 내보내기도 합니다. 로고처럼 투명 배경이 중요하면, 내보내기 설정에서 배경을 투명으로 두는 옵션이 켜져 있는지 확인하세요. JPG로 바꾸면 투명을 표현하지 못해 빈 부분이 흰색이나 검정으로 메워지니, 투명이 필요하면 PNG로 가는 것이 맞습니다.

자주 묻는 질문

Q. 작게 뽑았더니 흐려요. 다시 키우면 선명해지나요?
이미 PNG로 작게 뽑은 파일을 키우면 흐릿함이 그대로 커질 뿐입니다. 원본 SVG에서 처음부터 큰 크기로 다시 변환하는 것이 답입니다. 이게 벡터 원본을 보관해 두는 이유입니다.

Q. 인쇄에 쓸 건데 얼마나 크게 뽑아야 하나요?
화면용보다 훨씬 큰 픽셀 수가 필요합니다. 정확한 값은 인쇄 크기와 해상도 기준에 따라 다르므로, 넉넉히 크게 뽑아 두고 줄여 쓰는 편이 안전합니다.

Q. 변환하면 용량이 얼마나 되나요?
출력 픽셀 수와 그림의 복잡도, 색 수에 따라 크게 달라져 한마디로 정하기 어렵습니다. 크게 뽑을수록 커진다는 방향만 기억하고, 필요한 만큼만 키우는 것이 좋습니다.

 

변환 전에 "이 PNG를 어디에, 얼마나 크게 쓸지"부터 정하고 그 픽셀 수로 한 번에 뽑으세요. 쓰임새가 정해지면 너비 값 하나만 채워도 작업이 끝납니다.

벡터와 픽셀의 관계가 궁금하다면 PNG와 JPG의 차이, WebP 같은 다른 이미지 형식과의 비교로 넓혀 가면 이미지 파일 전체가 한결 또렷하게 잡힙니다.