변환 과정
SVG 텍스트를 파싱해 크기를 확정한 뒤 브라우저의 이미지 엔진으로 렌더링하고, 그 결과를 지정한 픽셀 크기의 캔버스에 그려 PNG로 인코딩합니다. 벡터를 비트맵으로 바꾸는 것이므로 결과는 확대하면 흐려지는 일반 이미지입니다. 너비만 정하면 높이는 SVG의 가로세로 비율(viewBox 또는 width/height)에 맞춰 계산됩니다. 파일은 브라우저 메모리에서만 다뤄지고 어디로도 전송되지 않습니다.
viewBox가 없는 SVG
SVG에 viewBox가 없고 width·height만 있으면 그 값을 기준으로 삼고, 둘 다 없으면 브라우저 기본값인 300×150으로 봅니다. 이 경우 그림이 잘리거나 작게 나올 수 있으므로 원본에 viewBox를 넣어 주는 것이 가장 확실합니다. 편집기에서 내보낼 때 "viewBox 유지" 또는 "반응형" 옵션을 켜면 됩니다.
배율과 레티나 화면
2x·3x는 지정한 너비의 2배·3배 픽셀로 그립니다. 고해상도 화면에서 CSS 100px 너비로 보여 줄 아이콘이라면 200px(2x) PNG를 만들어야 선명합니다. 앱 아이콘이나 SNS 프로필처럼 요구 크기가 정해진 경우 너비를 그 값으로, 배율을 1x로 두면 됩니다. 한 변이 8192px를 넘는 출력은 캔버스 메모리 문제로 제한합니다.
그려지지 않는 것들
보안 정책 때문에 SVG 안에서 다른 서버의 이미지나 CSS를 불러오는 부분은 렌더링되지 않거나, 렌더링되더라도 캔버스가 "오염"되어 PNG로 꺼낼 수 없습니다. 웹폰트도 마찬가지로 적용되지 않으며 텍스트는 이 기기의 설치 글꼴로 대체됩니다. 스크립트, 애니메이션(SMIL·CSS)은 정지 상태의 첫 프레임만 그려집니다. 필터·마스크·그라데이션은 대부분 정상 동작합니다.
자주 묻는 질문
결과가 비어 있거나 검은 사각형만 나와요.
SVG가 CSS 변수(currentColor 등)나 외부 스타일에 의존하면 색이 지정되지 않아 검게 나올 수 있습니다. fill 값을 직접 적어 주세요. viewBox가 없어 그림이 화면 밖에 그려진 경우도 있습니다.
투명 배경이 흰색으로 저장되나요?
배경을 "투명"으로 두면 PNG의 알파 채널이 유지됩니다. 미리보기의 체크무늬는 투명 영역 표시용이며 파일에는 들어가지 않습니다.
JPEG나 WebP로도 저장할 수 있나요?
이 도구는 PNG만 만듭니다. 내려받은 PNG를 이미지 압축 도구에 넣으면 JPEG·WebP로 바꿀 수 있습니다.