PNG 크기는 SVG 원본의 viewBox 숫자만 보고 정하지 마세요. 실제 표시 크기와 필요한 배율을 정한 뒤 가로·세로 비율을 유지해 내보내세요.
SVG → PNG
SVG의 좌표와 PNG의 픽셀을 구분하세요
SVG는 도형과 선, 텍스트 등을 좌표로 표현합니다. viewBox의 네 숫자는 내부 영역의 시작 위치와 가로·세로 범위를 뜻하며, 그 자체가 최종 PNG의 가로·세로 픽셀을 확정하지는 않습니다. 예를 들어 같은 SVG도 작은 아이콘이나 큰 배너로 렌더링할 수 있습니다.
PNG로 내보내면 그 순간 정한 픽셀 격자에 화면이 고정됩니다. 이후 PNG를 크게 늘리면 새로운 세부 묘사가 생기는 것이 아니라 기존 픽셀을 확대하는 것입니다. 따라서 변환 버튼을 누르기 전에 어디에 얼마나 크게 표시할 파일인지 먼저 적어 두는 편이 좋습니다.
- viewBox를 픽셀 크기로 그대로 읽지 않기
- 사용처의 표시 크기를 먼저 확인하기
SVG의 크기 조절 가능성과 PNG의 고정 픽셀 크기는 서로 다른 성질입니다.
표시 크기에서 출력 크기를 역산하세요
웹페이지에서 아이콘을 가로 100 CSS 픽셀로 보여 줄 계획이라면 출력 파일도 무조건 100픽셀이어야 하는 것은 아닙니다. 높은 화면 밀도에서 더 선명하게 보이도록 더 큰 픽셀 파일을 준비할 수 있습니다. 다만 실제 화면과 브라우저의 표시 방식, 파일 크기 비용을 함께 고려해야 합니다.
예를 들어 작은 로고를 여러 크기로 사용할 예정이라면 한 파일을 과하게 크게 만드는 대신 사용처별 출력 크기를 정할 수 있습니다. 앱 아이콘, 발표 자료, 인쇄용 시안은 각각 필요한 픽셀 수가 다릅니다. 어디에 놓일지 모르는 상태에서 숫자 하나만 골라 내보내는 것은 피하세요.
- 웹·앱·문서별 실제 표시 크기 정리하기
- 필요한 경우 여러 출력 크기 준비하기
가장 큰 실제 사용 크기를 기준으로 시험한 뒤 용량과 선명도를 비교하세요.
가로세로 비율과 여백을 함께 보세요
SVG의 viewBox 비율과 PNG 출력 상자의 비율이 다르면 렌더러의 비율 유지 설정에 따라 여백이 생기거나 내용이 잘리거나 도형이 늘어날 수 있습니다. 어느 결과가 나오는지는 SVG의 설정과 변환 도구의 동작에 달려 있습니다. 출력 치수 두 값을 각각 임의로 바꾸지 말고 비율을 먼저 확인하세요.
아이콘이 작게 보인다고 단순히 픽셀 수만 키워도 내부 여백이 넓으면 화면 속 실제 도형은 여전히 작습니다. viewBox 안의 여백, 도형의 위치, 출력 상자의 크기를 나누어 살펴야 합니다. 원본 SVG에서 여백을 수정할 수 없다면 결과 PNG를 잘라내는 방법도 검토할 수 있습니다.
- viewBox와 출력 상자의 비율 비교하기
- 도형 자체의 여백도 확인하기
왜곡 없이 크기를 바꾸려면 가로와 세로를 같은 비율로 조정하세요.
가느다란 선과 글자는 별도로 검사하세요
벡터 화면에서 매끈하던 1픽셀 안팎의 선은 작은 PNG로 렌더링할 때 흐릿하거나 불균일해 보일 수 있습니다. 작은 텍스트도 읽기 어려워질 수 있습니다. 단순한 로고라도 24픽셀 아이콘과 240픽셀 이미지의 결과가 같다고 생각하지 말고 최종 표시 크기에서 선 두께와 글자 모양을 검사하세요.
일부 SVG는 외부 글꼴이나 연결된 이미지에 의존합니다. 사용하는 환경에서 글꼴이 바뀌거나 연결 리소스를 읽지 못하면 PNG 결과가 원본 미리보기와 달라질 수 있습니다. 중요한 워드마크라면 변환 직후 글자 형태를 비교하고, 외부 파일이 필요한지 원본 SVG를 점검하세요.
- 작은 크기에서 선과 글자 가독성 확인하기
- 외부 글꼴·이미지 의존성 점검하기
출력 픽셀이 충분해도 원본 의존 리소스가 빠지면 모양이 달라질 수 있습니다.
최종 PNG를 실제 용도에서 다시 열어 보세요
SVG를 PNG로 변환하는 도구에서 가로·세로 픽셀을 지정할 수 있다면, 먼저 목표 사용처에 맞는 한 크기로 시험하세요. 투명 배경이 필요한 로고라면 결과 PNG에 투명 영역이 유지됐는지도 확인해야 합니다. 숫자만 맞는 파일보다 실제 화면에서 정확히 보이는 파일이 중요합니다.
다운로드한 PNG를 이미지 뷰어에서 열어 치수와 여백을 확인하고, 웹페이지나 문서에도 한 번 배치해 보세요. 흐릿함, 잘림, 예상 밖의 흰 배경이 있다면 출력 크기 또는 원본 SVG 설정을 다시 검토합니다. 사용처가 여러 개라면 가장 작은 크기와 가장 큰 크기를 함께 검사하세요.
- 파일 속성에서 최종 픽셀 수 확인하기
- 실제 페이지와 문서에 배치해 보기
한 번 내보낸 PNG가 모든 화면 크기에 최적인 것은 아닙니다.
핵심만 정리했어요
- viewBox는 SVG 내부 좌표와 비율을 설명하며 PNG 픽셀 수와 동일하지 않습니다.
- 최종 표시 크기와 화면 배율을 먼저 정한 뒤 출력 픽셀을 선택하세요.
- 가로세로 비율을 바꾸면 도형이 늘어나거나 여백·잘림이 생길 수 있습니다.
- 내보낸 PNG를 실제 크기와 확대 화면에서 모두 확인하세요.
자주 묻는 질문
viewBox가 100×100이면 PNG도 100×100픽셀인가요?
아니요. viewBox는 SVG 내부 좌표 범위이며 PNG 픽셀 크기는 내보내기 설정과 렌더링 환경에서 정해집니다.
PNG를 크게 만들면 항상 선명해지나요?
작은 출력에서 생기는 픽셀 부족은 줄일 수 있지만, 원본 SVG의 글꼴·이미지 문제나 실제 사용처의 표시 방식까지 자동으로 해결하지는 못합니다.
가로와 세로를 따로 바꾸면 어떤 문제가 있나요?
원본 비율과 달라져 늘어남, 여백 또는 잘림이 발생할 수 있습니다. 비율 유지 설정과 결과를 함께 확인하세요.
내보낸 PNG에 빈 여백이 많은 이유는 무엇인가요?
SVG의 viewBox 안에 도형 바깥 여백이 있거나 출력 상자의 비율이 달라서 그럴 수 있습니다. 원본의 좌표 범위와 출력 설정을 살펴보세요.
내보내기 후 가장 중요한 확인은 무엇인가요?
파일의 픽셀 크기만 보지 말고 실제 표시 크기에서 글자, 선, 여백, 잘림과 투명 배경을 확인하세요.