Softonic

SVG 크기 조정

단계 1 / 2
다음

SVG는 벡터 형식이라 해상도에 구애받지 않고 어떤 크기에서도 아주 선명하게 유지됩니다. SVG의 “크기 조정”은 이를 래스터화하지 않고 그림도 바꾸지 않습니다. 이 도구는 단지 루트 <svg> 요소에 새 width와 height를 픽셀로 설정할 뿐이며, 이는 선언된 표시 크기에 해당합니다. viewBox, 경로, 모든 좌표는 그대로 남으므로 그림은 비율을 유지하고 품질도 잃지 않습니다. 마크업을 붙여 넣고, 너비와 높이를 설정하고, 결과를 미리 본 뒤 복사하거나 내려받으세요.

SVG 크기를 조정하는 방법

  1. 1

    SVG 붙여넣기

    `<svg>...</svg>` 전체 마크업을 텍스트 상자에 붙여 넣으세요.

  2. 2

    너비와 높이 설정

    새 너비와 높이를 픽셀로 입력하세요.

  3. 3

    실시간 미리보기

    도구가 루트 `<svg>`의 `width`와 `height`를 다시 쓰고(없으면 추가) 결과를 즉시 보여 줍니다.

  4. 4

    복사 또는 내려받기

    업데이트된 마크업을 클립보드에 복사하거나 `.svg` 파일로 저장하세요.

표시 크기 대 viewBox

SVG에는 표시 크기(width/height)와 자체 좌표계(viewBox)가 있습니다.

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

이 SVG는 화면에서 200 × 200 픽셀이지만, 내부 좌표는 0에서 100까지입니다. r="40"인 원은 viewBox의 약 80%를 채우므로 폭이 대략 160 px로 렌더링됩니다. 이 도구는 width와 height, 즉 선언된 표시 크기만 바꿉니다. viewBox나 좌표는 건드리지 않는데, 바로 그래서 그림이 비율을 유지하고 선명하게 남습니다. 같은 그림을 다른 크기로 그리라고 브라우저에 지시하는 것이지, 다시 그리는 것이 아니기 때문입니다.

크기를 바꿔도 SVG가 똑같아 보일 수 있는 이유

SVG가 <img src="icon.svg" width="500"> 같은 방식으로 배치되었거나 CSS로 크기가 지정되어 있으면, 둘러싼 페이지가 표시 크기를 제어하며 파일 안의 width/height를 덮어씁니다. 그럴 때는 마크업 안에서만이 아니라 SVG가 사용되는 곳(<img>, CSS, 컨테이너)에서 크기를 바꾸세요.

선과 글자는 선명하게 유지됩니다

아무것도 래스터화되지 않으므로 글자는 진짜 벡터 텍스트로 남고 선은 어떤 크기에서도 매끄럽게 유지됩니다. 선 두께는 좌표계에서 정의되므로 그림과 함께 확대·축소됩니다. 크기와 상관없이 선이 같은 시각적 두께를 유지하게 하려면, 크기를 조정하기 전에 원본의 해당 요소에 vector-effect="non-scaling-stroke"를 추가하세요.

마크업을 깔끔하게 유지하기

Figma, Illustrator, Sketch에서 내보낸 SVG는 흔히 불필요한 무게를 안고 있습니다. 편집기 네임스페이스(sodipodi:, inkscape:), 숨겨진 메타데이터, 사용하지 않는 <defs> 등입니다. 이 도구는 크기 외에는 마크업을 그대로 둡니다. 군더더기를 걷어내려면 크기 조정 전이나 후에 SVGO 같은 최적화 도구로 파일을 처리하세요.

자주 묻는 질문

아니요. 루트 <svg>에 width와 height만 설정합니다. viewBox, 경로, 모든 좌표는 건드리지 않으므로 그림은 정확한 비율을 유지합니다.

보통은 페이지가 크기를 제어합니다. <img>의 width, CSS 규칙, 또는 컨테이너가 파일 자체의 크기를 덮어쓰고 있는 것입니다. 마크업 안에서만이 아니라 SVG가 사용되는 곳에서 크기를 바꾸세요.

네. SVG는 벡터 형식이라 아무것도 래스터화되지 않고 글자와 선이 어떤 크기에서도 선명하게 남습니다. 원본 파일에서 글자가 이미 경로로 변환되었다면 다른 도형처럼 확대·축소되지만, 그래도 선명합니다.

네. width와 height만 바뀌며, SVG 안의 <animate>, <script>, 이벤트 핸들러, CSS는 그대로 둡니다.

마크업은 크기가 조정된 미리보기를 렌더링하기 위해 저희 서버로 전송되며 요청이 끝난 뒤에는 저장되지 않습니다. 보관하거나 공유하지 않습니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

깃발 만들기

여섯 가지 레이아웃, 색상, 텍스트, 기호로 간단한 맞춤 3:2 깃발을 브라우저에서 디자인하세요. SVG 또는 PNG를 내려받거나 브라우저 인쇄 대화상자를 열 수 있습니다.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

이미지 색상 반전

이미지의 모든 RGB 채널을 반전시켜 네거티브를 생성합니다. 창의적인 편집이나 필름 스캔본을 확인하는 데 유용합니다.

이 도구는 다른 언어로도 제공됩니다