도구 소개
SVG viewBox 계산기는 내부 좌표와 외부 표시 크기를 구분해서 이해하도록 도와줍니다. 기존 viewBox를 입력해 시작점과 크기를 확인하거나 네 값을 직접 입력해 속성을 만들 수 있습니다. SVG 파일이 없어도 사용할 수 있습니다.
사용 방법
- 기존 viewBox를 입력하거나 SVG 파일 또는 소스에서 좌표 범위를 읽으세요.
- 최소 X, 최소 Y, 내부 너비와 높이를 확인하세요.
- 필요에 따라 좌표 범위를 바꾸고 표시 너비와 높이를 입력해 비율을 비교하세요.
- 생성된 viewBox 속성을 복사하고 그림 전체가 계속 보이는지 확인하세요.
주요 기능
- 시작점은 양수와 음수를 모두 지원하며 내부 너비와 높이는 0보다 커야 합니다.
- 가로세로 비율을 표시합니다. 예를 들어 0 0 800 600의 비율은 4:3입니다.
- 내부 범위와 표시 크기를 비교해 비율이 유지되는지, 서로 다른지 확인할 수 있습니다.
좌표 체계 안내
- viewBox의 순서는 min-x, min-y, width, height입니다. 앞의 두 숫자는 보이는 좌표 영역의 시작점이며 뒤의 두 숫자는 해당 영역의 너비와 높이입니다.
- 예를 들어 -100 -50 200 100은 (-100, -50)에서 시작하는 너비 200, 높이 100의 영역으로 비율은 2:1입니다.
- 표시 영역이 400 × 300이고 viewBox가 0 0 800 600이면 가로와 세로 모두 내부 단위 1이 CSS 픽셀 0.5에 해당합니다. 비율이 다를 때의 여백이나 잘림은 preserveAspectRatio 설정에 따라 달라집니다.
SVG 안전 안내
미리보기에는 안전하게 처리한 정적 사본을 사용합니다. 스크립트, 클릭 이벤트와 애니메이션을 실행하지 않으며 외부 이미지, 글꼴과 스타일도 불러오지 않습니다. 외부 참조, 삽입된 웹페이지와 지원되지 않는 내용은 제거되므로 원본과 다르게 보일 수 있습니다. DOCTYPE이나 사용자 정의 엔티티가 포함된 문서는 지원하지 않습니다.
SVG 파일 또는 UTF-8 소스는 최대 2 MiB, 노드는 요소와 텍스트를 포함해 최대 20,000개, 중첩 깊이는 최대 96단계까지 허용됩니다. 내용이 너무 크거나 구조가 복잡하면 파일을 단순하게 정리한 뒤 사용하세요.
개인정보 보호
SVG 내용은 사용자의 브라우저에서만 처리되며 서버에 업로드되지 않습니다.
입력과 결과는 자동으로 저장되지 않습니다. 지우거나 페이지를 떠나기 전에 필요한 파일을 다운로드하고 원본 사본도 보관하세요.
자주 묻는 질문
SVG viewBox의 네 숫자는 무엇을 뜻하나요?
차례대로 최소 X, 최소 Y, 내부 너비와 내부 높이입니다. 시작점은 음수일 수 있으며 너비와 높이는 0보다 커야 합니다.
viewBox="0 0 100 100"은 무슨 뜻인가요?
좌표 (0, 0)에서 시작하는 100 × 100 영역으로 가로세로 비율은 1:1입니다. 실제 표시 픽셀 크기는 바깥쪽 크기로 정해집니다.
viewBox는 width, height와 어떤 관계인가요?
viewBox는 내부 좌표 범위를, width와 height는 표시 영역을 정의합니다. 브라우저는 내부 범위를 표시 영역에 맞춰 그립니다.
preserveAspectRatio란 무엇인가요?
비율이 다를 때의 정렬과 크기 조정 방식을 정합니다. meet는 전체를 보여 주되 여백이 생길 수 있고, slice는 영역을 채우되 일부가 잘릴 수 있습니다. none은 가로와 세로를 각각 조정합니다.