SVG 여백 제거
SVG 파일의 빈 여백을 찾아 viewBox를 그림 경계에 딱 맞게 줄입니다. 남길 여백을 고르고 고친 SVG 코드를 복사하거나 저장합니다.
내 기기 안에서만 처리돼요. 서버로 전송하지 않아요.
관련 도구
이미지 SVG 변환 (벡터화)
PNG·JPG 로고나 도장, 그림을 확대해도 깨지지 않는 SVG 벡터로 바꿉니다. 로고·흑백·색상 프리셋과 색 수(2~16), 노이즈 제거, 흰 배경 투명 처리를 고르고 원본과 SVG를 겹쳐 비교할 수 있습니다.
이미지 → Base64 변환
이미지를 data URI와 순수 base64 문자열로 바꿉니다. HTML img 태그와 CSS 배경 코드도 바로 복사할 수 있고, 큰 파일은 용량 경고를 보여 줍니다.
파비콘 만들기 (ICO)
로고 이미지(PNG·JPG·WebP·SVG)로 16·32·48px favicon.ico와 애플 터치 아이콘, 안드로이드 아이콘, site.webmanifest를 한 번에 만들어요. 브라우저 탭 모양을 미리 보고 <head> 코드도 복사할 수 있어요.
자주 묻는 질문
SVG 안의 스크립트가 실행되나요?
아니요. 경계를 찾을 때 SVG를 이미지(img)로 그리기 때문에 안에 든 스크립트는 실행되지 않아요.
경계는 얼마나 정확한가요?
긴 변을 2048px로 그려서 찾으므로 그림 크기의 약 0.05% 안쪽으로 맞아요. 흐린 가장자리가 잘리지 않게 한 픽셀씩 여유를 둬요.
width·height는 어떻게 바뀌나요?
px나 단위 없는 값은 줄어든 비율만큼 함께 줄여요. %나 em처럼 상대 단위면 속성을 지워 viewBox 비율을 따르게 해요.
파일이 서버로 올라가나요?
아니요. 브라우저 안에서만 처리해요.
SVG 여백 제거, 어떤 도구인가요?
SVG 아이콘이나 로고의 그림 둘레에 쓸데없이 넓은 빈 여백이 있으면, 웹페이지에서 크기를 맞추거나 정렬하기가 번거롭습니다. 이 도구는 SVG를 실제로 그려 보고 그림이 있는 경계를 찾아 viewBox를 그 경계에 딱 맞게 줄입니다. 선 두께나 글자처럼 도형 좌표만으로는 알기 어려운 부분까지 화면에 보이는 그대로 계산하고, 원하는 만큼 여백을 남길 수도 있습니다. width·height 속성도 새 비율에 맞게 고치고, 고친 코드를 복사하거나 SVG 파일로 저장합니다.
이럴 때 쓰세요
아이콘 정렬 맞추기
아이콘마다 여백이 달라 버튼 안에서 어긋날 때 여백을 없애 크기를 맞춰요.
로고 파일 정리
디자인 툴에서 대지 크기 그대로 내보낸 로고 SVG의 빈 공간을 잘라내요.
파비콘·스티커 준비
여백을 줄인 SVG로 '파비콘 만들기 (ICO)'에 넣으면 아이콘이 꽉 차게 보여요.
사용 방법
SVG 올리기
여백을 줄일 SVG 파일 1개를 올리면 바로 경계를 찾아 결과를 보여 줍니다.
- viewBox나 width·height가 있는 SVG여야 크기를 알 수 있어요.
남길 여백 정하기
필요하면 '남길 여백'을 0~20%로 정합니다. 그림 크기 대비 비율입니다.
- 점선 테두리가 새 viewBox 경계예요. 원본과 나란히 비교해 보세요.
코드 복사·저장
고친 SVG 코드를 복사하거나 'SVG 저장'으로 파일을 받습니다.
- SVG의 나머지 내용(도형·스타일)은 건드리지 않고 viewBox와 width·height만 바꿔요.
자주 나는 문제와 해결
- 그려진 내용이 없다고 나와요
- SVG가 현재 viewBox 밖에만 그려져 있거나 완전히 투명한 경우예요. 디자인 툴에서 대지 안에 그림이 있는지 확인해 주세요.
- 흰 배경까지 남아 여백이 안 줄어요
- 흰색 사각형 배경이 들어 있는 SVG는 배경도 그림으로 보여서 줄일 게 없어요. 디자인 툴에서 배경 사각형을 지우고 다시 넣어 보세요.
- 글자가 조금 잘려요
- SVG 안의 웹 글꼴을 불러오지 못하면 기본 글꼴로 계산해 폭이 달라질 수 있어요. '남길 여백'을 조금 늘리거나 글자를 윤곽선으로 바꾼 SVG를 쓰세요.