LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

SVG viewBox 편집기

자체 기획 도구찾는 도구가 없나요?

SVG의 viewBox를 직접 읽고 다시 씁니다

SVG 마크업을 붙여넣어 현재 viewBox(없다면 너비와 높이)를 불러온 다음, min-x, min-y, 너비, 높이를 조정해 작품을 자르거나 여백을 넣거나 기준점을 옮기고, 다시 작성된 SVG를 복사하세요.

SVG 미리보기
출력
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <rect width="120" height="120" rx="16" fill="#0f766e" />
  <circle cx="60" cy="60" r="34" fill="#f4d35e" />
</svg>

아무것도 업로드되지 않습니다. 마크업은 이 페이지 안에서만 파싱되고 다시 작성됩니다.

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

viewBox 속성은 SVG의 내부 좌표계를 렌더링 공간에 매핑하는 값이므로, 이를 바꾸는 것이 패스를 하나도 건드리지 않고 아이콘의 일부를 잘라내거나 여백을 추가하거나 원점을 옮기는 방법입니다. 텍스트 에디터에서 숫자 네 개를 손으로 수정하는 일은 번거롭고 실수하기 쉽습니다. 이 도구는 붙여넣은 SVG를 파싱해 네 개의 viewBox 입력란을 자동으로 채우고, 값을 바꿀 때마다 마크업을 실시간으로 다시 작성하며, 복사하기 전에 자른 결과를 미리보기로 확인할 수 있습니다.

사용 방법

  1. <svg> 태그가 포함된 SVG 마크업을 붙여넣습니다.
  2. "현재 viewBox 불러오기"를 눌러 네 입력란을 채우거나, min-x, min-y, 너비, 높이를 직접 입력합니다.
  3. 미리보기를 확인한 다음 다시 작성된 SVG 마크업을 복사합니다.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

이 도구가 제 SVG를 어딘가에 업로드하나요?
아니요. 마크업은 브라우저 탭 안에서 단순 문자열 매칭으로 파싱되고 다시 작성되며, 서버로 전송되지 않습니다.
너비와 높이 속성은 어떻게 되나요?
그대로 유지됩니다. viewBox를 바꾸면 브라우저가 적용하는 방식과 마찬가지로 기존 뷰포트 안에 그려지는 내용의 배율만 바뀌며, 요소 자체의 크기는 바뀌지 않습니다.
미리보기가 가끔 비어 보이는 이유는 무엇인가요?
너비나 높이가 0이거나, viewBox가 작품과 겹치지 않으면 아무것도 남지 않을 만큼 잘려 나갑니다. 박스를 넓히거나 min-x/min-y 값을 확인하세요.

전체 도구로 돌아가기