SVGView

SVG 크기 조정 도구

레이아웃을 깨지 않고 치수를 조정합니다. 아이콘을 그리드에 맞추거나 디자인 사양을 일치시키는 데 유용합니다. SVG 파일을 온라인으로 열고 즉시 처리를 시작하세요.

아직 SVG가 로드되지 않았습니다. 시작하려면 파일을 업로드하거나 붙여넣으세요.

SVG 에디터에 오신 것을 환영합니다.

SVG 파일을 드롭하고, "업로드" 또는 "아이콘"을 클릭하거나, Ctrl/Cmd+V로 SVG 코드를 붙여넣으세요.

샘플 아이콘으로 시작

아래에서 샘플을 선택하거나 직접 업로드하여 편집하세요. SVG

SVG 크기 조정 도구를 사용하는 이유는 무엇입니까?

픽셀 또는 백분율 제어

SVG 크기 조정은 정확한 너비와 높이 입력은 물론 비율 조정도 지원합니다. 이를 통해 디자인 사양을 일치시키거나 다양한 중단점에 맞게 자산을 확장하는 것이 간단해졌습니다. 일관성을 위해 디자인 토큰 또는 그리드 시스템에 맞게 크기를 정렬할 수 있습니다. 또한 숫자 입력을 통해 내보낸 PNG 크기를 쉽게 일치시킬 수 있습니다.

종횡비 잠금

잠금 옵션은 비율을 유지하고 왜곡을 방지합니다. 비율을 그대로 유지하면 아이콘과 일러스트레이션이 시각적으로 균형을 이룰 수 있습니다. 이는 늘어나서는 안 되는 로고에 특히 유용합니다.

ViewBox-인식 출력

이 도구는 viewBox를 유지하거나 수정하여 자산이 CSS 및 HTML에서 올바르게 확장되도록 합니다. 이렇게 하면 프로덕션에서 예기치 않은 자르기 또는 공백이 방지됩니다. 적절한 viewBox 설정은 자산을 교체할 때 레이아웃 변경을 줄여줍니다.

실시간 미리보기

SVG 확대/축소 및 배경 옵션을 사용하여 업데이트 크기를 즉시 조정하세요. 결과를 미리 보면 내보내기 전에 간격, 안쪽 여백 및 정렬을 확인하는 데 도움이 됩니다. 대비되는 배경을 사용하여 흩어진 획이나 추가 패딩을 찾아보세요. 격자 보기는 광학 정렬을 확인하는 데 도움이 될 수 있습니다.

유연한 내보내기

SVG 크기 조정을 사용하면 크기가 조정된 SVG를 다운로드하거나 PNG를 한 단계로 내보낼 수 있습니다. 이는 문서나 프리젠테이션에 대한 래스터 대체가 필요할 때 유용합니다. 쉽게 전달할 수 있도록 두 버전을 동일한 폴더에 보관하세요. 두 형식을 모두 내보내면 검토 중에 앞뒤로 이동하는 횟수가 줄어듭니다.

로컬 처리

SVG 크기 조정은 전적으로 브라우저에서 실행되므로 파일이 장치를 떠나지 않습니다. 이렇게 하면 클라이언트 자산을 비공개로 유지하고 반복 속도를 높일 수 있습니다. 로컬 처리는 또한 대용량 파일의 업로드 지연을 방지합니다. 네트워크 정책이 업로드를 차단할 때 잘 작동합니다.

SVG 크기를 조정하는 방법

1

SVG 추가

파일을 드래그 앤 드롭하거나 SVG 마크업을 붙여넣으세요. SVG 크기 조정은 소스를 로컬로 로드하고 원본 viewBox을 유지합니다. SVG에 viewBox가 없으면 크기를 조정하기 전에 하나를 추가하세요. SVG 파일을 온라인으로 열고 즉시 처리를 시작하세요.

2

치수 설정

대상 너비와 높이를 입력하거나 비율에 맞게 배율을 입력하세요. SVG 크기 조정은 모양을 확인할 수 있도록 실시간 미리보기를 표시합니다. 획 너비를 확인하여 여전히 균형이 잡혀 있는지 확인하세요.

3

결과 내보내기

크기가 조정된 SVG를 다운로드하거나 PNG를 즉시 내보냅니다. SVG 크기 조정은 파일 이름을 깔끔하게 유지하므로 전달 시 자산을 쉽게 추적할 수 있습니다. icon-name-24.svg와 같은 일관된 이름 지정 패턴을 사용하세요.

SVG 크기 조정 FAQ

온라인에서 SVG의 크기를 정확한 크기로 조정할 수 있나요?
그렇습니다. SVG 크기 조정은 너비와 높이에 대한 정확한 픽셀 값을 허용하므로 레이아웃 사양을 쉽게 일치시킬 수 있습니다. 이는 자산이 엄격한 구성요소 크기에 맞아야 하는 경우에 유용합니다.
SVG 크기를 조정할 때 가로 세로 비율을 어떻게 유지하나요?
SVG에서 잠금 옵션을 활성화하세요. 비율을 유지하려면 크기를 조정하세요. 이렇게 하면 아이콘과 로고가 늘어나는 것을 방지할 수 있습니다. 또한 원이 타원으로 변하는 것을 방지합니다.
SVG 크기 조정 도구가 viewBox를 유지합니까?
SVG 크기 조정은 viewBox을 유지하고 필요할 때 업데이트하여 브라우저에서 크기 조정이 정확하게 유지되도록 합니다. viewBox 값을 수정하면 CSS의 응답성이 향상됩니다. 이는 SVG이 배경 이미지로 사용될 때 중요합니다.
크기를 조정한 후 PNG를 내보낼 수 있나요?
그렇습니다. SVG 크기 조정에는 문서, 슬라이드 또는 래스터 전용 도구에 대한 PNG 내보내기 옵션이 포함되어 있습니다. PNG 내보내기는 플랫폼이 SVG를 지원하지 않는 경우 유용합니다. 또한 빠른 클라이언트 미리보기에도 유용합니다.
내 SVG가 업로드되었나요?
아니요. SVG 크기 조정은 브라우저에서 로컬로 실행되므로 파일이 장치를 떠나지 않습니다. 이를 통해 고객 자산의 기밀이 유지됩니다.
파일 크기 제한은 무엇입니까?
SVG 크기 조정은 최대 10MB 파일을 지원합니다. SVG이 매우 복잡한 경우 먼저 최적화를 고려하세요. 경로가 단순할수록 렌더링 속도도 빨라집니다.
Retina 자산의 크기를 조정할 수 있나요?
그렇습니다. SVG 크기 조정은 2x 또는 3x 크기를 내보내는 데 적합합니다. 그런 다음 CSS에서 축소하여 선명도를 높일 수 있습니다. 이는 디자인 시스템의 아이콘 세트에 유용합니다. 확실하지 않은 경우 부드러움을 피하기 위해 더 크게 내보내고 축소하십시오.
SVG 크기 조정 도구는 다운로드 없이 무료로 사용할 수 있나요?
그렇습니다. SVG 크기 조정 도구는 브라우저에서 무료로 사용할 수 있습니다. 다운로드나 설치가 필요하지 않습니다.
SVG 크기 조정 도구를 사용하려면 계정이 필요합니까?
아니요. SVG 크기 조정 도구는 가입 없이 브라우저에서 즉시 작동하며 파일은 로컬에 유지됩니다.

관련 SVG 도구

일관된 자산을 회전, 최적화 및 내보내려면 SVG 크기 조정 도구를 사용하세요.

SVG 회전 및 뒤집기

SVG 전에 방향을 조정하세요. 최종 치수가 레이아웃과 일치하도록 크기를 조정하세요. 이렇게 하면 회전 후에도 너비와 높이를 예측할 수 있습니다.

도구 열기

SVG 최적화 도구

SVG 이후 파일을 압축합니다. 출력을 가볍게 유지하려면 크기를 조정하세요. 앱과 디자인 도구에서는 작은 파일이 더 빠르게 로드됩니다.

도구 열기

SVG 뷰어

SVG 크기 조정 전후의 자산을 미리 보고 정렬을 확인하세요. 패딩을 확인하려면 그리드 배경을 사용하세요.

도구 열기

SVG to PNG

PNG를 SVG와 함께 내보내기 래스터 폴백이 필요한 경우 결과 크기를 조정하세요. 이는 프리젠테이션 및 문서에 유용합니다.

도구 열기