SVG를 가져오면 크기가 틀릴 때: 진단과 해결
두 앱이 단위를 다르게 해석하면 SVG가 작거나 크게 들어옵니다. 작품을 편집하기 전에 기준 정사각형으로 배율을 진단하세요.
목차
SVG를 잘못된 크기로 가져와도 경로는 보통 손상되지 않았습니다. 내보내는 앱과 가져오는 앱이 좌표 단위를 픽셀, 인치, 밀리미터에 대응하는 방식에서 다릅니다. 그래서 같은 파일이 브라우저에서는 맞고 Figma에서는 작으며 CAD나 커팅 소프트웨어에서는 또 다른 배율이 됩니다.
아직 다시 그리거나 부분별 크기를 바꾸지 마세요. 기준 크기 사각형을 추가하고 전체를 가져와 측정하세요. 한 번의 측정으로 문서 배율 문제인지 작품 자체 문제인지 알 수 있습니다.
5분 진단
- 손대지 않은 SVG 사본을 유지하세요.
- 작품 옆에 10 mm, 1인치 또는 100 px 기준 정사각형을 더하세요.
- 가져와 사각형을 측정하세요.
- 모든 치수가 같은 배수로 바뀌면 문서 배율을 한 번 고치세요.
- 사각형은 맞는데 작품이 틀리면 그룹, 변환, 스트로크, 클리핑을 보세요.
SVG 내부의 세 크기
‘크기’라고 부르는 세 가지 관련 정보가 있습니다. SVG 2 좌표계 명세는 사용자 좌표, 뷰포트, viewBox 관계를 정의합니다.
- 도형은 경로와 도형 내부 좌표입니다. 자체 좌표계에서 사각형이 0부터 100까지일 수 있습니다.
- **
viewBox**는 보일 좌표 사각형입니다.viewBox="0 0 100 100"은 양방향으로 100 사용자 단위인 영역입니다. - 뷰포트는 표시하거나 가져온 크기입니다. 루트는
width="100mm",width="400"또는 너비 없음으로 선언할 수 있습니다. 수신 앱이 자체 단위로 바꿉니다.
실제 출력 크기를 명시한 완전한 100단위 정사각형입니다.
<svg xmlns="http://www.w3.org/2000/svg"
width="25mm" height="25mm" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>도형은 100 × 100 사용자 단위이고 의도한 뷰포트는 25 × 25 mm입니다. viewBox가 두 공간을 대응합니다. width와 height를 없애거나 단위 없는 숫자로 바꾸면 수신 앱의 크기 선택 여지가 커집니다.
SVG 편집 안내는 안전한 코드 변경을 다룹니다. 이 문제는 경로 데이터를 유지하고 루트 <svg>를 검사하세요.
DPI가 원인으로 지목되는 이유
경로에는 PNG나 JPG 같은 픽셀 해상도가 없습니다. CSS 픽셀과 실제 단위를 변환하거나 앱이 자체 출력 규칙을 붙일 때 DPI가 등장합니다.
CSS Values 명세는 1in을 96 CSS 픽셀, 1pt를 1/72인치로 정의합니다. CSS 픽셀을 포인트로 오인하면 익숙한 96 대 72, 즉 1.333 배율 불일치가 생깁니다. 실제 width와 height를 무시하고 viewBox만 쓰거나 자체 문서 단위를 적용해 다른 배수도 나옵니다.
따라서 ‘DPI를 바꾸세요’는 불완전합니다. 바꿀 래스터 DPI가 없을 수 있습니다. 먼저 계산하세요.
scale factor = intended size / imported size100 mm 정사각형이 75 mm로 가져와지면 배수는 100 / 75 = 1.3333입니다. 전체 스케치나 문서를 조정하고 다시 검증하세요.
사각형과 작품이 같은 비율로 틀리면 전체 문서를 고치세요. 사각형은 맞는데 작품이 틀리면 단위는 두고 경계나 변환을 보세요. 처음에는 똑같이 보이는 두 문제를 구분합니다.
기준 정사각형 시험
측정하기 충분히 크고 작품 옆에 맞는 사각형을 쓰세요.
- 원본 편집기에서 한 변이 정확히 10 mm, 1인치 또는 다른 알려진 크기인 정사각형을 그리세요.
- 구별되는 채우기나 스트로크를 지정하고 완성 디자인 밖에 놓으세요.
- 함께 SVG로 내보내세요.
- 크기 핸들을 끌지 않고 가져오세요.
- 목적지 치수 도구로 측정하세요.
- 의도한 치수를 가져온 치수로 나누세요.
- 전체를 한 번 조정하고 별도 도형을 따로 바꾸지 마세요.
- 최종 측정을 통과한 뒤에만 사각형을 삭제하세요.
사각형이 맞으면 문서 단위는 대개 정상입니다. 변환 그룹, 경계에 포함된 시각 스트로크 폭, 캔버스 밖 객체, 내용을 페이지에 맞추는 가져오기를 보세요. 날카로운 스트로크 모서리 하나가 경계를 바꾸면 실제 배율 변경 전에 마이터 돌출 진단을 따르세요.
CNC, 레이저, 3D는 실제 단위 사각형을 쓰세요. 픽셀 사각형은 비례 확대는 확인하지만 장비에 필요한 밀리미터를 증명하지 못합니다.
파일과 가져오기 중 무엇을 고칠까요?
| 상황 | 적합한 수정 |
|---|---|
| 한 앱이 모든 SVG를 같은 틀린 배수로 가져옴 | 가져오기 사전 설정 저장 또는 앱에서 한 번 조정 |
viewBox만 있고 실제 width, height 없음 | 필요하면 실제 치수 명시 |
| 사각형 포함 전체가 같은 배수로 변경 | 전체 문서나 스케치 조정 |
| 사각형은 맞고 그룹 하나만 틀림 | 전역 단위 대신 그룹 transform 검사 |
| 보이는 경계가 디자인보다 큼 | 캔버스 밖 객체, 마스크, 불필요한 점 제거 |
| 스트로크 폭이 예상 밖으로 변함 | 객체와 함께 확대하는지 정하고 제작에 윤곽선이 필요할 때만 확장 |
원본을 관리하며 같은 종류의 흐름에 반복 전달하면 파일 수정이 유용합니다. CAD나 커팅 앱의 알려진 배율 규칙이 있고 다른 곳에서는 정상이라면 가져오기 수정이 안전합니다.
CAD와 커팅 소프트웨어의 추가 점검
브라우저는 표시만 하면 되지만 CNC, 레이저, 3D는 정확한 실물이 필요합니다. 배율 통과 후 도형을 따로 보세요.
- 장비 문서의 단위 확인
- 전체 상자뿐 아니라 실제 요소 측정
- 닫힌 프로파일 유지 확인
- 경계를 넓히는 숨은 배경 사각형 확인
- 재료 작업 전 공구 경로, 스케치, 돌출 미리보기 확인
이미지 CNC SVG 안내는 경로 정리와 CAM 전달을 다룹니다. 다음이 돌출이면 배율을 맞춘 뒤 3D 프린팅 SVG 흐름을 쓰세요.
Shaper Origin에는 실제 크기와 절단 유형 체크리스트를 이어가세요. 축척뿐 아니라 라우팅 전 의도한 절단 지정도 필요합니다.
치수를 확인한 뒤 최종 준비 화면 전에 커팅 매트와 크기를 비교하세요.
인쇄 그림 카드에는 시각 일정 카드 레이아웃 안내가 배치, PDF 페이지 치수, 인쇄 배율을 확인합니다. SVG가 맞아도 프린터가 페이지를 줄일 수 있습니다.
PerfectVector의 역할
래스터를 편집 SVG 경로로 만듭니다. PNG나 JPG만 있고 CAM용 도형이 필요하면 CNC용 SVG와 DXF 흐름이 유용합니다. 부품의 최종 실제 크기는 알지 못하므로 목적지에서 설정하고 검증해야 합니다.
벡터화는 확대 가능한 도형을 복구하고 기준 정사각형과 CAM 측정은 실제 축척을 정합니다. 두 점검으로 구분하면 깨끗한 추적이 잘못된 크기의 절단이 되는 일을 막습니다.
FAQ
내보낸 것보다 작게 들어오는 이유는 무엇인가요? 앱들이 사용자 단위, CSS 픽셀, 포인트, 실제 단위를 다르게 대응할 수 있습니다. 기준 정사각형을 비교하고 전체가 같은 배수로 바뀌면 부분 편집 대신 문서를 한 번 조정하세요.
SVG에 DPI가 있나요? 도형은 해상도 독립적이라 래스터 같은 고정 밀도가 없습니다. 픽셀이나 디자인 단위를 인치나 밀리미터에 대응할 때 DPI 같은 변환이 중요합니다. 숨은 해상도보다 가져오기 규칙이 원인인 경우가 많습니다.
viewBox는 크기에 무엇을 하나요?
viewBox는 보이는 좌표 사각형을 정의해 사용자 단위를 뷰포트에 대응합니다. 자체 실제 크기를 선언하지는 않습니다. 루트 width, height, CSS, 수신 앱이 크기를 정합니다.
브라우저에서는 맞는데 Fusion이나 LightBurn에서는 왜 틀리나요? 브라우저는 CSS 뷰포트에서 표시하지만 CAD와 레이저는 실제 문서 단위로 대응합니다. 다른 규칙이나 일부 크기 메타데이터 무시가 가능하므로 기준을 측정하고 전체를 계산 배수로 고치세요.
크기를 고치려면 DXF로 바꿀까요? 첫 단계로는 아닙니다. 같은 모호함이나 새 모호함을 전달할 수 있습니다. 기준 정사각형부터 진단하고 목적지가 선호할 때 DXF를 쓰며 가져온 뒤 다시 검증하세요.
Sources
- W3C — SVG 2 좌표계 — 사용자 단위, 뷰포트,
viewBox, 변환입니다. - W3C — CSS Values and Units Level 4 — CSS 픽셀, 인치, 포인트의 기준 변환입니다.
- Autodesk Fusion — SVG 삽입 — 스케치 SVG 배치와 배율 제어입니다.
공구 경로나 절단 전에 CNC용 SVG나 DXF를 준비하고 검사하세요. 기준 정사각형, 실제 요소, 최종 CAM 미리보기를 측정한 뒤 제작 파일에서 사각형을 제거하세요.
