SVGView

SVG 축소기

모양을 변경하지 않고 SVG 크기를 축소합니다. 웹 성능과 가벼운 아이콘 전달에 적합합니다. SVG 파일을 온라인으로 열고 즉시 처리를 시작하세요.

SVG 파일을 드래그 앤 드롭하세요

또는 클릭해서 파일을 고르거나 SVG 코드를 붙여넣으세요

.svg 파일만 허용됩니다
Ctrl+V / Cmd+V로 SVG 코드를 붙여넣으세요

SVG 축소기를 사용하는 이유는 무엇입니까?

공백 제거

SVG 축소기는 공백, 탭 및 줄 바꿈을 제거하여 바이트를 줄입니다. 이는 SVG가 HTML 또는 CSS에 인라인되고 모든 문자가 계산되는 경우에 이상적입니다. 또한 JSON 또는 CMS 필드에 포함된 SVG의 크기를 줄입니다.

시각적 안전

형식만 변경되므로 출력에서는 렌더링이 유지됩니다. 경로, 채우기 및 그룹은 그대로 유지되므로 시각적 결과는 브라우저 전체에서 동일하게 유지됩니다. 이를 통해 디자인 검토는 실제 시각적 변화에 초점을 맞춥니다. SVG 축소기는 형상이나 색상을 변경하지 않기 때문에 시각적 QA 전에 실행하는 것이 안전합니다.

더 작은 파일

SVG 축소기는 인라인 자산이 많은 아이콘 세트, 마케팅 페이지 및 UI 키트의 페이로드 크기를 줄이는 데 도움이 됩니다. 파일이 작을수록 더 빠르게 로드되고 성능 지표가 향상됩니다. 이는 모바일에서 성능 예산을 충족하는 데 도움이 됩니다.

SVGO 전원 공급

SVG 축소기는 안정적인 공백 제거를 위해 SVGO를 사용합니다. 이렇게 하면 파일 전체에서 결과의 일관성이 유지되고 위험한 속성 변경을 방지할 수 있습니다. CI 워크플로에서는 예측 가능합니다.

즉시 내보내기

처리 후 SVG 축소기를 사용하면 파일을 즉시 다운로드하거나 복사할 수 있습니다. 이렇게 하면 결과를 저장소나 파이프라인에 쉽게 넣을 수 있습니다. 결과를 티켓에 직접 붙여넣을 수 있습니다.

로컬 처리

모든 것이 브라우저에서 실행되므로 파일이 업로드되지 않습니다. 이를 통해 개인 자산을 안전하게 보호하고 오프라인 작업을 지원합니다. 또한 대규모 자산의 업로드 속도가 느려지는 것을 방지합니다. 로컬 실행은 잠긴 네트워크에서 잘 작동합니다.

SVG를 축소하는 방법

1

SVG 업로드

파일을 드래그 앤 드롭하거나 마크업을 붙여넣어 시작하세요. SVG 축소기는 로컬로 로드되고 미리보기를 표시하므로 내보내기 전에 소스를 확인할 수 있습니다. 디자인 도구에서 원시 내보내기 또는 스프라이트를 붙여넣을 수 있습니다. SVG 파일을 온라인으로 열고 즉시 처리를 시작하세요.

2

코드 축소

모든 속성을 유지하면서 공백을 제거하려면 축소 단계를 실행하세요. 이는 디자인 시스템과 스크립트의 출력을 안정적으로 유지합니다. SVG 축소기는 출시 전에 출력을 표준화하는 데 도움이 됩니다. 읽을 수 있는 diff가 필요한 경우 먼저 포맷한 다음 축소하세요.

3

SVG 다운로드

축소된 파일을 즉시 내보냅니다. SVG 축소기는 파일 이름을 일관되게 유지하므로 프로젝트 전체에서 자산을 쉽게 교체할 수 있습니다. 출력이 커밋되거나 인라인될 준비가 되었습니다.

SVG 축소기 FAQ

온라인 SVG 축소가 SVG 모양을 변경합니까?
아니요. SVG 축소기는 공백만 제거하므로 시각적 출력은 동일하게 유지됩니다. 형상, 색상 및 변형은 결과에 그대로 유지됩니다. 이는 픽셀 단위까지 완벽하게 유지되어야 하는 아이콘에 이상적입니다.
SVG 축소와 최적화: 차이점은 무엇인가요?
SVG 축소기는 형식 지정에 중점을 두고 최적화는 중복 속성과 메타데이터를 제거합니다. 구조적 변경 없이 빠른 크기 확보를 위해 사용하고, 더 깊은 압축이 필요할 때 최적화하세요. 최적화를 통해 사용되지 않는 메타데이터를 제거하고 페이로드를 더욱 줄일 수도 있습니다.
ID나 viewBox가 변경되나요?
아니요. SVG 축소기는 ID, viewBox, 너비 및 높이를 유지합니다. 선택기나 스크립트를 사용하는 경우 출력에서 ​​해당 참조가 중단되지 않습니다. 이는 CSS 및 JS에서 선택기를 안정적으로 유지합니다.
축소된 SVG를 다운로드할 수 있나요?
그렇습니다. SVG 축소기는 즉각적인 다운로드 및 복사 옵션을 제공하므로 CI의 출력, 빌드 단계 또는 빠른 자산 전달을 사용할 수 있습니다. 빠른 QA 비교에 유용합니다. 이는 여러 장치에서 자산을 검증할 때 유용합니다.
SVG가 서버에 업로드되어 있나요?
아니요. SVG 축소기는 브라우저에서 로컬로 실행되므로 파일이 장치를 떠나지 않습니다. 이 로컬 워크플로는 엄격한 개인정보 보호 요구 사항을 충족합니다. 계정이나 업로드가 필요하지 않습니다.
축소하기 전에 포맷하거나 정리해야 합니까?
읽을 수 있는 차이점이 필요한 경우 먼저 포맷하거나 정리한 다음 마지막에 SVG 축소기를 실행하세요. 이를 통해 검토 결과를 읽기 쉽게 유지하고 제작 파일을 컴팩트하게 유지합니다. 해당 워크플로는 디자인 시스템 저장소에서 일반적입니다.
축소가 접근성에 영향을 미치나요?
SVG 축소기는 접근성 속성을 제거하지 않습니다. 제목과 ARIA 라벨은 그대로 유지되므로 추가 단계 없이 규정을 준수할 수 있습니다. 내보낸 후에는 항상 접근성 체크리스트를 통해 확인하세요.
인라인 SVG에 사용할 수 있나요?
그렇습니다. SVG 축소기 출력은 HTML, CSS 또는 JS의 인라인 SVG에 이상적입니다. 인라인 자산이 작을수록 페이로드가 줄어들고 모바일에서 렌더링 속도가 빨라집니다. CSS 배경 이미지에도 유용합니다.
크거나 복잡한 파일은 어떻습니까?
SVG 축소기는 대용량 파일을 처리할 수 있지만 처리 시간은 장치에 따라 다릅니다. 파일이 큰 경우 도구를 실행하기 전에 파일을 분할하거나 사용하지 않는 레이어를 제거하세요. 속도가 느려지면 무거운 탭을 닫으세요.
읽을 수 있는 버전을 유지해야 합니까?
그렇습니다. SVG 축소기는 프로덕션 빌드에 가장 적합합니다. 편집을 위해 형식화된 소스 파일을 유지하고 배포 또는 인라인 처리를 위해 축소된 버전을 사용합니다. 빌드 아티팩트에 축소된 파일을 저장합니다. 향후 편집을 단순화하려면 디자인 소스에 읽을 수 있는 버전을 유지하세요.
SVG Minifier를 다운로드 없이 무료로 사용할 수 있나요?
그렇습니다. SVG Minifier는 브라우저에서 무료로 사용할 수 있습니다. 다운로드나 설치가 필요하지 않습니다.
SVG Minifier를 사용하려면 계정이 필요합니까?
아니요. SVG Minifier는 가입 없이 브라우저에서 즉시 작동하며 파일은 로컬에 유지됩니다.

관련 SVG 도구

SVG 축소기를 이러한 도구와 결합하여 자산을 정리, 최적화 또는 변환하세요. 예측 가능한 결과를 얻으려면 순서대로 사용하십시오.

SVG 최적화 도구

최종 자산에서 남은 공백을 제거하려면 심층적인 최적화 후에 SVG 축소기를 실행하세요.

도구 열기

SVG 포맷터

깔끔한 차이점과 컴팩트한 프로덕션 파일이 필요한 경우 포맷 후 SVG 축소기를 사용하세요.

도구 열기

SVG 정리

먼저 메타데이터를 제거한 다음 SVG 축소기로 마무리하여 출력을 작고 깔끔하게 유지합니다.

도구 열기

SVG to Data URI

SVG 축소기 출력을 CSS 배경 또는 인라인 사용을 위해 압축된 Data URI로 변환합니다.

도구 열기

관련 SVG 블로그

SVG 워크플로, 문제 해결, 프로덕션 실무에 관한 글을 계속 읽어 보세요.