같은 SVG라도 width·height와 viewBox를 어떻게 정하느냐에 따라 크기와 여백이 달라집니다. 숫자를 바꾸기 전에 어떤 값이 출력 크기이고 어떤 값이 그림의 좌표인지 구분해야 합니다.
출력 픽셀과 그림 좌표
viewBox="0 0 100 50"인 그림은 내부에서 가로 100, 세로 50의 좌표 범위를 씁니다. 출력 너비·높이를 800×400으로 정해도 내부 도형 좌표를 각각 여덟 배로 고칠 필요는 없습니다.
원본 비율 유지하기
100×50 그림은 2:1입니다. 800×400은 같은 비율이지만 800×800은 다릅니다. 다른 비율을 지정하면 원본의 preserveAspectRatio 설정에 따라 여백이나 잘림이 생길 수 있습니다. 특정 부분을 잘라야 할 때만 viewBox의 시작점과 범위를 바꾸세요.
정리 과정에서 사라지는 내용
PolishTools는 원본 SVG를 페이지에 직접 넣지 않습니다. 지원하는 도형과 속성만 남긴 소스로 미리보기와 PNG를 만듭니다. 외부 이미지, 스타일시트, 스크립트, use로 참조한 심볼이나 필터 효과에 의존한 그림은 일부가 없어질 수 있습니다.
원본과 달라졌다면 정리된 소스를 확인하고 원본 편집기에서 단순 도형·경로 중심으로 내보내 보세요. 텍스트의 모양을 고정해야 한다면 원본 편집기에서 path로 변환하는 작업이 필요할 수 있습니다.
예: 2:1 심볼을 800×400 PNG로
viewBox가 0 0 100 50인 심볼을 웹 페이지용 PNG로 저장합니다.
순서
- SVG를 불러오고 viewBox는 그대로 둡니다.
- 너비 800, 높이 400을 입력하고 결과를 만듭니다.
- 작은 글자와 외부 참조에 의존한 그림이 빠지지 않았는지 확인하고 PNG를 받습니다.
결과
출력 픽셀은 800×400이고 원래 2:1 비율을 유지합니다. 원본이 지원 범위 밖 요소를 썼다면 먼저 원본 편집기로 수정해야 합니다.
자주 묻는 질문
viewBox를 비우면 어떻게 되나요?
원본 viewBox를 사용합니다. 원본에도 없으면 읽을 수 있는 양의 픽셀 너비·높이로 범위를 정하고, 둘 다 없으면 입력을 거부합니다.