SVG 최적화기

SVG를 붙여넣거나 놓고 SVGO로 축소하세요. 모든 처리는 브라우저에서 이루어집니다.

SVG 최적화기 작동 방식

SVG 최적화기는 브라우저 안의 Web Worker에서 SVGO(SVG Optimizer)를 실행하여 SVG 파일을 업로드하지 않고 최소화하고 정리합니다. SVGO는 주석 제거, 공백 축소, 동일한 경로 병합, 도형을 가장 간결한 표현으로 변환, 시각적 효과가 없는 속성 제거를 수행하는 구성 가능한 플러그인 세트를 적용합니다. 결과는 원본과 동일하게 렌더링되는 더 작은 SVG입니다.

Figma, Illustrator, Inkscape 같은 디자인 도구로 생성된 SVG 파일에는 종종 상당한 오버헤드가 포함됩니다. 편집기별 메타데이터, 빈 그룹, 중복 변환 속성, 브라우저에 불필요한 네임스페이스 선언이 있습니다. SVGO의 기본 플러그인 세트는 이러한 오버헤드를 안정적으로 제거합니다. 최적화된 파일은 다운로드로 제공되고 파일 크기 감소 백분율이 표시되어 최적화가 가치 있었는지 확인할 수 있습니다.

작성자: Bastien Sulyan

SVG 최적화기 단계별 사용 방법

SVG 파일을 업로드 영역에 끌어다 놓거나 클릭해 파일을 선택합니다.
SVGO Web Worker가 기본 플러그인 세트로 즉시 최적화를 실행합니다.
파일 크기 감소 백분율과 원본 대 최적화된 파일 크기를 확인합니다.
다운로드 버튼을 클릭해 최적화된 SVG를 기기에 저장합니다.
특정 플러그인이 렌더링 문제를 일으키는 경우 플러그인 구성을 조정하고 다시 최적화하세요.

자주 사용되는 사례

프론트엔드 개발자가 프로덕션 에셋 파이프라인에 커밋하기 전에 Figma에서 내보낸 아이콘을 최적화하여 각 아이콘을 4KB에서 1KB 미만으로 줄일 때.
웹 디자이너가 브라우저에서는 보이지 않지만 파일을 부풀리는 편집기 메타데이터 레이어가 포함된 Illustrator에서 내보낸 SVG 일러스트레이션을 정리할 때.
SVG 글리프에서 아이콘 폰트를 빌드하는 개발자가 폰트 빌드 단계 전에 각 소스 SVG가 깨끗하고 일관되게 구조화되었는지 확인할 때.
성능 엔지니어가 HTML의 인라인 SVG를 감사하고 각각의 부풀려진 원본을 SVGO 최적화 버전으로 교체해 페이지 무게를 개선할 때.

자주 묻는 질문

SVGO가 내 SVG의 모양을 바꾸나요?

SVGO의 기본 플러그인은 시각적으로 무손실이 되도록 선택됩니다. 최적화된 SVG는 모든 표준 브라우저에서 원본과 동일하게 렌더링됩니다. 일부 공격적인 플러그인(경로 좌표를 크게 반올림하는 것 등)은 미묘한 렌더링 차이를 만들 수 있습니다. 시각적 변화를 발견하면 브라우저에서 원본과 최적화된 파일을 비교하고 문제를 일으키는 특정 플러그인을 비활성화하세요.

SVG 파일이 최적화를 위해 서버로 전송되나요?

아니요. SVGO는 브라우저 탭 안의 Web Worker에서 실행됩니다. SVG 텍스트는 로컬 디스크에서 읽히고 JavaScript 메모리에서 처리되며, 출력이 다운로드를 위해 페이지로 반환됩니다. 파일 내용은 기기를 벗어나지 않습니다.

내 SVG가 얼마나 더 작아지나요?

감소는 원본에 따라 다릅니다. 편집기 메타데이터가 있는 디자인 도구에서 내보낸 SVG는 일반적으로 30~70% 줄어듭니다. 이미 간결한 손으로 작성한 SVG는 5~15%만 줄어들 수 있습니다. 도구는 정확한 바이트 수와 백분율을 보여주어 각 파일을 개별적으로 평가할 수 있습니다.

최적화가 파일 안의 SVG 애니메이션이나 JavaScript에 영향을 미치나요?

SVGO의 기본 구성은 애니메이션 요소와 SMIL 속성을 보존합니다. 스크립트 요소는 제거됩니다. 이 도구는 SVGO 기본 프리셋 위에 removeScripts 플러그인을 추가하는데, 곧 삽입할 SVG에 실행 가능한 코드가 남아 있어서는 안 되기 때문입니다. 속성을 정리하는 일부 플러그인은 애니메이션이 해당 속성을 ID로 참조하는 경우 상호작용할 수 있습니다. 복잡한 애니메이션을 사용하는 파일을 최적화한 후 렌더링된 출력을 확인하세요.

여러 SVG 파일을 한꺼번에 최적화할 수 있나요?

현재 버전은 한 번에 하나의 SVG 파일을 처리합니다. 파일을 올리고, 결과를 다운로드한 후, 다음 파일을 올려야 합니다. 이번 릴리스에서는 한 세션에서 여러 파일의 일괄 처리가 제공되지 않습니다.

도구는 어떤 버전의 SVGO를 사용하나요?

도구는 Web Worker에서 실행되는 SVGO를 번들로 제공합니다. 번들 버전은 도구의 정보에 명시되어 있습니다. SVGO는 활발히 유지 관리되며 플러그인 API가 v1, v2, v3 사이에서 크게 변경되었습니다. 현재 도구는 v3 플러그인 형식을 사용합니다.