SVG를 PNG로 바꿔 보면 "몇 픽셀로 저장하지?"에서 막힙니다. SVG는 픽셀이 아니라 도형과 곡선으로 저장돼 있어서 원래 크기가 없기 때문입니다. 크기를 어떻게 정하면 되는지 정리했습니다.
왜 크기를 정해야 하나요?
PNG는 가로세로 픽셀이 정해진 이미지입니다. SVG를 PNG로 바꾸는 순간 해상도가 확정되고, 나중에 키우면 일반 이미지처럼 흐려집니다. 그래서 쓸 크기보다 넉넉하게 정해서 변환하는 것이 안전합니다. 줄이는 것은 괜찮지만 키우는 것은 안 됩니다.
이 사이트에서 크기를 정하는 법
SVG는 지정한 크기에 맞춰 벡터 상태로 직접 그린 뒤 저장하기 때문에 크게 만들어도 선명합니다. 처음 작은 PNG로 만든 다음 키우는 것과 결과가 다릅니다.
- 가로 기준(px): 가로만 정하면 세로는 비율대로 정해집니다. 가장 간단합니다.
- 세로 기준(px) 또는 **비율(%)**도 쓸 수 있습니다.
- 직접 지정(가로×세로): 정사각형 아이콘처럼 정확한 크기가 필요할 때 씁니다. SVG의 비율이 다르면 "비율 유지 + 여백 채우기"로 가운데에 놓고 남는 곳을 투명으로 채울 수 있습니다. 예를 들어 가로로 긴 SVG를 256×256 PNG에 넣을 수 있습니다.
SVG에 크기 정보가 없을 때
SVG 파일에 width와 height가 없으면 viewBox의 비율을 이용해 가로 1024px를 기준으로 그립니다. viewBox마저 없으면 정사각형으로 봅니다. 자동으로 정해진 크기가 마음에 들지 않으면 위 방법으로 직접 지정하세요. 원본 크기가 24×24처럼 작게 적힌 아이콘 SVG도 크기를 지정하면 큰 PNG로 선명하게 만들 수 있습니다.
투명 배경
변환 결과의 배경은 기본적으로 투명합니다. 흰 배경이 필요하다면 PNG 대신 JPG로 저장하면서 배경색을 고르거나, PNG에서 "투명·여백을 배경색으로 채우기"를 켜고 색을 고르세요.
흔한 문제
- 글자가 다른 글꼴로 보입니다. SVG 안의 글자가 시스템에 없는 글꼴을 쓰고 있으면 브라우저가 다른 글꼴로 대신 그립니다. 글자를 윤곽선(path)으로 변환해 저장한 SVG가 가장 안전합니다. 대부분의 벡터 편집 프로그램에 "윤곽선으로 변환" 기능이 있습니다.
- 연결된 외부 이미지나 글꼴이 빠집니다. SVG가 외부 파일을 불러오도록 되어 있으면 이미지로 그리는 과정에서 불러오지 못할 수 있습니다. 필요한 요소를 SVG 안에 포함해 저장하세요.
- 복잡한 SVG가 느립니다. 아주 복잡한 SVG를 매우 큰 크기로 그리면 시간이 오래 걸리거나 실패할 수 있습니다. 한 변 최대 16384px까지 지원하지만 필요한 만큼만 정하세요.
용도별 추천 크기
정답이 있는 것은 아니지만 출발점으로 쓸 수 있는 예시입니다.
- 웹 로고: 쓰이는 폭의 2배 정도(고해상도 화면 대비)
- 앱·게임 아이콘: 사용하는 플랫폼 문서의 요구 크기 (예: 512×512, 1024×1024)
- 파비콘: 정사각형 256×256 이하, 파비콘 가이드 참고
반대로 PNG 같은 이미지를 SVG로 바꾸려면 PNG를 SVG로 바꿀 때 알아 둘 점을 먼저 읽어 보세요. 이 변환은 추정이라 한계가 있습니다.