SVG viewBox 편집기
SVG 코드를 붙여넣고 viewBox·width·height를 실시간으로 수정
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
SVG 코드를 붙여넣으면 viewBox의 minX, minY, 너비, 높이와 width·height 속성을 숫자 입력으로 바로 조정하고 결과를 실시간 미리보기로 확인할 수 있는 도구입니다. 아이콘 크롭이나 여백 조정, 잘못된 viewBox 때문에 이미지가 잘리는 문제를 눈으로 확인하며 고치고 싶은 개발자와 디자이너에게 유용합니다. 모든 파싱과 변환은 브라우저 안에서만 이루어지며 서버로 전송되지 않습니다.
사용 방법
- SVG 코드 입력창에 원본 SVG 마크업을 붙여넣습니다.
- 입력한 SVG의 viewBox 값이 Min X, Min Y, 너비, 높이 칸에 자동으로 채워집니다.
- 숫자 입력값을 조정하며 오른쪽 미리보기에서 결과를 즉시 확인합니다.
- 필요하면 width·height 속성을 입력하고, 완성된 SVG 코드를 복사 버튼으로 가져갑니다.
자주 묻는 질문
- viewBox가 없는 SVG를 넣으면 어떻게 되나요?
- viewBox 속성이 없으면 width·height 속성 값을 기준으로 초기 viewBox를 추정해 채워줍니다.
- 입력한 SVG가 서버로 전송되나요?
- 아니요. DOMParser와 XMLSerializer를 이용해 브라우저 안에서만 처리하며 외부로 전송되지 않습니다.
- 잘못된 SVG 코드를 입력하면 어떻게 되나요?
- 파싱에 실패하거나 SVG 요소를 찾을 수 없으면 미리보기 영역에 오류 메시지가 표시됩니다.