SVG 좌표 소수점, 몇 자리까지 줄여야 안전할까
디자인 툴에서 내보낸 SVG의 path 좌표는 소수점이 6~7자리까지 남아 있는 경우가 많습니다. 이걸 줄이면 파일이 가벼워진다는 건 알지만, 몇 자리까지 줄여야 모양이 그대로 유지되는지는 감으로 판단하기 쉽지 않습니다. 뷰포트 크기와 실제 렌더링 크기만 알면 이 값은 직접 계산할 수 있습니다.
요약 ① 좌표 1단위가 화면에서 몇 픽셀에 해당하는지는 "렌더링 크기 ÷ 뷰포트(viewBox) 크기"로 정해집니다. ② 소수점 n자리로 반올림했을 때 좌표가 어긋날 수 있는 최대치는 0.5 × 10⁻ⁿ 단위이며, 이를 픽셀로 환산하면 눈에 보이는지 계산할 수 있습니다. ③ 계산된 오차가 1픽셀보다 훨씬 작으면 일반적인 화면에서는 구분되지 않습니다.
왜 내보낸 SVG는 소수점이 이렇게 긴가
인스케이프나 피그마에서 도형을 그리면 회전·베지어 곡선 계산 과정에서 부동소수점 연산이 여러 번 누적됩니다. 그래서 저장되는 좌표는 "M12.482913 24.891234"처럼 화면 표시에 필요한 것보다 훨씬 정밀합니다.
이 정밀도는 편집기가 도형을 다시 계산할 때 오차를 줄이기 위한 것이지, 브라우저가 그림을 그리는 데 필요한 정보가 아닙니다. 문제는 "그럼 몇 자리를 남겨야 안전한가"인데, 이건 파일 자체가 아니라 이 SVG가 화면에서 실제로 몇 픽셀 크기로 쓰이는지에 달려 있습니다.
몇 자리까지 줄여도 되는지 직접 계산하는 법
공식 자체는 간단합니다. 좌표 1단위가 몇 픽셀인지 구하고, 반올림 자릿수별 최대 오차를 그 값과 곱하면 됩니다.
1단계 — 좌표 1단위가 몇 픽셀인지 구하기
viewBox="0 0 100 100"인 SVG를 24×24px 아이콘으로 쓴다면, 1단위 = 24 ÷ 100 = 0.24px입니다. 같은 파일을 200×200px 배너로 쓴다면 1단위 = 2px로 커집니다.
2단계 — 반올림 자릿수별 최대 오차 구하기
소수점 n자리로 반올림할 때 좌표가 어긋날 수 있는 최대치는 0.5 × 10⁻ⁿ 단위입니다. 정수로 반올림(n=0)하면 최대 0.5단위, 소수점 1자리(n=1)면 최대 0.05단위까지 어긋날 수 있습니다.
3단계 — 두 값을 곱해 픽셀 오차로 환산하기
24px 아이콘 기준으로 계산하면, 정수 반올림의 최대 오차는 0.5 × 0.24px ≈ 0.12px이고 소수점 1자리는 0.05 × 0.24px ≈ 0.012px입니다. 둘 다 픽셀 하나보다 훨씬 작아 안티앨리어싱 범위 안에서 뭉개집니다.
같은 파일을 200px 배너로 확대하면 정수 반올림의 오차는 0.5 × 2px = 1px까지 커져, 곡선 구간이 살짝 각져 보일 수 있습니다. 즉 안전한 자릿수는 파일이 아니라 "어디에 얼마나 크게 쓰이는가"로 정해집니다.
저희 도구로 확인하기. 이 계산을 파일마다 손으로 반복하는 대신, 자릿수를 슬라이더로 바꿔가며 원본·단순화 미리보기와 용량 절감률을 바로 비교할 수 있습니다.
무료 · 설치 없이 브라우저에서 즉시 변환 · 입력한 코드는 서버로 전송되지 않습니다
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 작은 아이콘인데도 정수 반올림 후 티가 남 | viewBox 단위 자체가 크거나(예: 0 0 24 24가 아니라 0 0 1000 1000), 실제 렌더링 크기가 생각보다 큰 경우입니다. 1·2단계 계산을 다시 해보세요 |
| 소수점을 줄였는데 용량이 거의 안 줄어듦 | 좌표 자릿수가 이미 짧거나, 주석·메타데이터 등 path 외의 텍스트가 용량 대부분을 차지하는 경우입니다 |
| 곡선(C, Q) 구간만 유독 뭉개짐 | 곡선 제어점은 직선 좌표보다 위치 변화에 더 민감하게 반응해, 같은 자릿수라도 시각적 영향이 크게 보일 수 있습니다 |
| opacity·stroke-width는 그대로인데 좌표만 바뀜 | 이 도구는 d 속성 안의 숫자만 정리합니다. 다른 소수 값까지 줄이려면 별도의 전체 SVG 최적화 도구가 필요합니다 |
정리
- 좌표 1단위가 몇 픽셀인지는 "렌더링 크기 ÷ viewBox 크기"로 정해집니다.
- 소수점 n자리 반올림의 최대 오차는 0.5 × 10⁻ⁿ 단위이며, 이를 픽셀로 환산해 1px보다 훨씬 작으면 눈에 띄지 않습니다.
- 같은 파일이라도 아이콘처럼 작게 쓸 때와 크게 확대해 쓸 때 안전한 자릿수가 달라집니다.
- 큰 사이즈로도 쓸 가능성이 있다면 정수보다는 소수점 1~2자리를 남기는 편이 안전합니다.
무료 · 설치 없이 브라우저에서 즉시 변환 · 입력한 코드는 서버로 전송되지 않습니다
자주 묻는 질문
SVG path 소수점을 다 지우고 정수로만 써도 되나요?
아이콘처럼 수십 px 이내로 작게 쓰는 경우 대부분 문제 없습니다. 다만 같은 좌표를 큰 배너나 인쇄용으로 확대해 쓴다면 정수 반올림의 오차가 픽셀 단위로 커져 곡선이 각지게 보일 수 있으니, 위 계산식으로 렌더링 크기를 먼저 확인하는 편이 안전합니다.
디자인 툴은 왜 처음부터 소수점을 짧게 내보내지 않나요?
편집기 내부의 회전·베지어 곡선 계산은 부동소수점 연산이라 오차가 누적되기 쉬워, 화면 표시에 필요한 것보다 훨씬 많은 자릿수를 그대로 저장해 두기 때문입니다. 이 정밀도는 재편집 시 계산 정확도를 위한 것이지 화면에 보이는 정보가 아닙니다.
소수점을 줄이면 용량이 얼마나 줄어드나요?
좌표 개수와 원래 자릿수에 따라 다르지만, 소수점 67자리를 12자리로 줄이면 숫자 하나당 글자 수가 절반 이하로 줄어드는 경우가 많습니다. path가 많은 복잡한 아이콘일수록 절감 효과가 커집니다.
곡선(C, Q 명령어)의 제어점도 같은 기준으로 줄여도 되나요?
네, d 속성 안의 모든 숫자에 같은 자릿수가 적용됩니다. 다만 곡선 제어점은 직선 좌표보다 위치 변화에 민감할 수 있어, 곡선이 많은 path라면 결과 미리보기로 한 번 더 확인하는 편이 안전합니다.