SVG 크기 조정
☞ 모든 처리가 브라우저 안에서 이루어집니다 — 아무것도 업로드되지 않습니다여기에 SVG를 놓으세요
또는 클릭해서 찾기 — SVG만 가능
미리보기
OneImageTool
무료 이미지 도구
SVG 크기 조정
SVG에 새 너비와 높이를 주세요 — 아니면 아예 없애서 컨테이너에 맞춰 늘어나게 하세요. 그림 자체에는 전혀 손대지 않습니다.
또는 클릭해서 찾기 — SVG만 가능
미리보기
다시 그리는 일이 없다
래스터 이미지는 새 크기로 다시 그려야 하고, 그 과정에서 디테일이 사라지거나 없던 것이 만들어집니다. 반면 SVG는 그리는 지시문을 담고 있어서, 크기 조정은 '얼마나 크게 그릴지'를 적어 두는 일에 불과합니다. 파일 안의 모든 패스와 색, 그러데이션이 그대로 남습니다.
그 메모가 바로 width와 height 한 쌍입니다. 그 아래의 viewBox는 내부 좌표계를 정의하며 건드리지 않습니다. 도형이 잘리지 않고 함께 커지는 이유가 전적으로 여기에 있습니다.
세 단계
.svg 파일을 고르세요 — 파일은 기기에 남습니다.
너비를 입력하거나, 퍼센트를 고르거나, 반응형으로 바꾸세요.
같은 그림을 원하는 크기로 받게 됩니다.
간단한 답변
아니요. 흐려질 것 자체가 없습니다 — 파일은 픽셀이 아니라 도형을 서술하므로, 어떤 크기를 주든 새로 그려집니다. 25%에서도 400%에서도 마찬가지입니다.
SVG가 반응형이 됩니다. 두 속성이 없으면 브라우저가 비율을 viewBox에서 가져오고 요소가 컨테이너를 채우도록 두므로, 크기를 CSS에서 정할 수 있습니다. 컴포넌트 라이브러리의 아이콘에서 흔히 쓰는 방식입니다.
그럴 때는 viewBox를 대신 추가해 드립니다. viewBox가 없으면 SVG는 자기 좌표를 그냥 픽셀로 취급하므로, 너비를 바꾸면 크기가 조정되는 게 아니라 그림이 잘리거나 빈 공간이 덧붙습니다. 추가되는 viewBox는 원래 크기와 같아서 아무것도 밀리지 않습니다.
거의 그렇지 않습니다 — 숫자 두 개만 바뀝니다. 파일을 줄이고 싶다면 SVG 최적화 도구를 거치세요. 편집기 메타데이터와 지나치게 정밀한 좌표를 제거해 줍니다.
아니요. 파일은 브라우저 안에서 해석되고 다시 쓰입니다.