잘라 낸 SVG의 그림이 달라지나요?

달라지지 않습니다. 도형은 그대로 두고 보이는 영역을 정하는 viewBox와 크기 속성만 바꿉니다. 그래서 확대해도 품질이 그대로입니다.

둘레에 여백을 조금 남기고 싶어요.

남길 여백에 값을 넣으면 됩니다. SVG 단위로 넣거나, 잘린 그림의 긴 변에 대한 %로 넣을 수 있습니다.

흰 배경이 있는 SVG가 잘리지 않아요.

대지 전체를 흰 사각형으로 칠한 SVG입니다. 흰 배경도 여백으로 보기를 켜면 거의 흰색인 부분을 빈 곳으로 보고 잘라 냅니다.

여러 파일을 한 번에 처리할 수 있나요?

SVG 파일을 여러 개 넣으면 같은 설정으로 모두 자릅니다. 전체를 ZIP으로를 누르면 SVG, PNG, 또는 둘 다를 ZIP 하나로 받습니다.

PNG로도 받을 수 있나요?

PNG 저장을 누르면 잘린 범위만 PNG로 그려 줍니다. 1배, 2배, 4배, 가로 512px, 가로 1024px 가운데 고를 수 있고 투명한 곳은 투명하게 남습니다.

SVG 여백 제거 (viewBox 자동 맞춤, 여러 파일, 여백 남기기, PNG 저장)

🔒 입력한 내용과 파일은 이 브라우저 안에서만 처리합니다. 서버로 보내지 않습니다.

SVG 여백 제거 사용법

SVG 파일의 그림 둘레에 남아 있는 쓸데없는 빈 공간을 잘라 내는 도구입니다. 디자인 프로그램에서 아이콘이나 로고를 큰 대지째 내보내면 그림은 가운데 작게 있고 주변이 텅 빈 SVG가 만들어집니다. 이런 파일을 웹 페이지에 넣으면 아이콘이 작게 보이고 정렬이 어긋납니다. 이 도구는 실제로 그려지는 부분의 범위를 찾아 SVG의 보이는 영역(viewBox)을 그 범위에 딱 맞게 고쳐 줍니다. 도형 자체는 건드리지 않으므로 그림의 품질은 그대로입니다.

쓰는 순서

SVG 파일을 끌어다 놓거나, 코드를 복사해 SVG 코드 붙여 넣기 칸에 넣고 붙여 넣은 코드 넣기를 누릅니다.
바로 잘린 결과가 나옵니다. 원래 viewBox와 바뀐 viewBox, 줄어든 넓이 비율, 자르기 전후 그림을 확인합니다.
둘레에 숨 쉴 공간이 필요하면 남길 여백에 값을 넣습니다. 옵션을 바꾸면 모든 파일이 다시 처리됩니다.
SVG 저장, 코드 복사, PNG 저장 가운데 필요한 것을 누릅니다. 파일이 여러 개면 전체를 ZIP으로 받습니다.

예시로 확인한 값

예시 SVG 넣기는 200×200 대지 가운데에 반지름 30인 원(가로세로 70~130)과 그 아래 사각형(세로 140~160)이 있는 아이콘을 넣습니다. 여백 0으로 자르면 viewBox가 "0 0 200 200"에서 "70 70 60 90"으로 바뀌고 넓이는 87% 줄어듭니다. 남길 여백을 10(SVG 단위)으로 하면 사방으로 10씩 넓어져 "60 60 80 110"이 됩니다. 여백 0인 결과를 PNG 2배로 저장하면 120×180 픽셀 그림이 됩니다.

선 굵기도 그림의 일부로 계산합니다. 반지름 20인 원에 굵기 10인 테두리만 그린 100×100 SVG는 도형 좌표로는 30~70이지만 선이 바깥으로 5씩 나가므로 "25 25 50 50"으로 잘립니다.

옵션 설명

옵션	설명
남길 여백	SVG 단위는 viewBox 좌표 그대로의 값이고, %는 잘린 그림의 긴 변에 대한 비율입니다. 크기가 제각각인 아이콘 여러 개에 같은 비율의 여백을 줄 때는 %가 편합니다.
크기 속성: 잘린 크기로 고치기	원래 SVG에 width, height가 있으면 같은 비율로 줄여 적습니다. 원래 10mm였던 그림의 5분의 1만 남으면 2mm가 됩니다. 단위(px, mm 등)는 유지합니다.
크기 속성: 지우기	width, height를 빼서 SVG가 들어가는 칸의 크기에 맞춰 늘어나게 합니다. 웹에서 CSS로 크기를 정할 때 알맞습니다.
흰 배경도 여백으로 보기	대지 전체를 흰 사각형으로 칠해 둔 SVG는 흰색까지 그림으로 보아 잘리지 않습니다. 이 옵션을 켜면 거의 흰색인 부분을 빈 곳으로 봅니다. 흰 사각형 자체는 지우지 않고 보이는 영역만 줄입니다.
PNG 크기	1배는 viewBox 한 단위를 1픽셀로 그립니다. 작은 아이콘을 선명하게 쓰려면 2배나 4배, 정해진 폭이 필요하면 가로 512px이나 1024px을 고릅니다.

어떻게 범위를 찾나

SVG를 긴 변 2,048픽셀 크기로 실제로 그려 본 뒤 색이 칠해진 픽셀이 있는 범위를 찾습니다. 그래서 선 굵기, 글자, 그림자처럼 도형 좌표만으로는 알기 어려운 부분도 범위에 들어갑니다. 찾은 가장자리가 도형의 실제 좌표와 1.5픽셀 이내로 가까우면 실제 좌표로 맞춰 "69.922" 같은 어중간한 값 대신 "70"처럼 깔끔한 값이 나오게 합니다.

주의할 점

SVG 안에서 외부 이미지나 글꼴 파일을 불러오는 경우, 브라우저가 보안상 그것을 그리지 않아 범위가 실제보다 작게 잡힐 수 있습니다. 결과 그림을 꼭 확인하세요.
시스템에 없는 글꼴로 쓴 글자는 다른 글꼴로 그려 범위를 재므로 조금 어긋날 수 있습니다. 디자인 프로그램에서 글자를 윤곽선으로 바꿔 내보내면 정확합니다.
코드에 xmlns(이름공간) 선언이 빠져 있으면 자동으로 넣어 처리합니다. 고친 코드에도 들어갑니다.
파일은 서버로 보내지 않고 이 브라우저 안에서 처리합니다.

마지막 수정 2026-11-10. 있었으면 하는 기능이나 불편한 점은 이 도구에 건의하기로 알려 주세요.

SVG 여백 제거