SVG 최적화 도구 - SVG 파일 최적화 및 압축 온라인

메타데이터 제거, 경로 최적화, 불필요한 코드 정리로 SVG 파일을 최적화하고 압축합니다. SVGO 기반, 100% 클라이언트 사이드 — 서버로 데이터가 전송되지 않습니다.

SVG 입력

SVG 파일을 여기에 놓거나 클릭하여 선택

설정

정밀도3

숫자 값의 소수점 정밀도 (낮을수록 파일이 작아짐)

멀티패스

더 이상 최적화가 불가능할 때까지 반복 실행

출력 정리

들여쓰기로 출력 포맷팅

플러그인

정리

cleanupAttrscleanupIdscleanupNumericValuescleanupEnableBackground

변환

convertColorsconvertShapeToPathconvertEllipseToCircleconvertPathDataconvertTransforminlineStyles

제거

removeDoctyperemoveXMLProcInstremoveCommentsremoveMetadataremoveEditorsNSDataremoveUselessDefsremoveUnknownsAndDefaultsremoveNonInheritableGroupAttrsremoveUselessStrokeAndFillremoveHiddenElemsremoveEmptyTextremoveEmptyAttrsremoveEmptyContainersremoveUnusedNSremoveDesc

최적화

mergeStylesminifyStylesmoveElemsAttrsToGroupmoveGroupAttrsToElemscollapseGroupsmergePathssortAttrssortDefsChildren

SVG 파일은 브라우저에서 완전히 처리됩니다. 서버로 데이터가 전송되지 않습니다.

자주 묻는 질문

SVG 최적화란 무엇이며 왜 필요한가요?

SVG 최적화는 불필요한 데이터를 제거하고 무손실 변환을 적용하여 SVG 파일의 크기를 줄이는 과정입니다. Adobe Illustrator, Figma, Inkscape 같은 디자인 도구는 내보내기 시 장황한 메타데이터, 편집기 네임스페이스, 주석, 최적화되지 않은 경로 데이터를 포함합니다. 이러한 추가 데이터로 인해 SVG 파일이 필요한 것보다 2-5배 커질 수 있습니다. SVG를 최적화하면 웹 페이지 로딩 시간이 단축되고, 대역폭이 감소하며, Core Web Vitals 점수가 향상됩니다.

이 SVG 최적화 도구는 어떻게 사용하나요?

SVG를 제공하는 두 가지 방법이 있습니다: (1) SVG 파일을 업로드 영역에 드래그 앤 드롭하거나 클릭하여 파일을 선택합니다. (2) SVG 마크업을 코드 입력 영역에 직접 붙여넣습니다. SVG가 로드되면 도구가 SVGO의 기본 플러그인 프리셋을 사용하여 자동으로 최적화합니다. 정밀도 슬라이더 조정, 멀티패스 모드 활성화, 개별 플러그인 토글로 최적화를 미세 조정할 수 있습니다.

SVG 데이터는 안전한가요? 파일이 서버에 업로드되나요?

SVG 데이터는 100% 안전하며 브라우저를 벗어나지 않습니다. 모든 최적화는 브라우저에서 직접 실행되는 SVGO JavaScript 라이브러리를 사용하여 클라이언트 측에서 수행됩니다. SVG 데이터가 서버로 전송되지 않으며, 데이터가 수집되지 않고, 추적이 발생하지 않습니다. 브라우저의 네트워크 탭을 모니터링하여 확인할 수 있습니다.

원본 크기와 Gzip 크기의 차이점은 무엇인가요?

원본 크기는 디스크상의 실제 파일 크기(바이트)입니다. Gzip 크기는 gzip 압축 후의 파일 크기로, 웹 서버가 HTTP를 통해 파일을 전송할 때 일반적으로 사용하는 것입니다. 대부분의 웹 서버가 SVG 파일을 브라우저로 보내기 전에 gzip으로 압축하므로 Gzip 크기가 실제 대역폭 영향을 더 잘 나타냅니다. 이 도구는 두 지표를 모두 표시하여 정보에 기반한 결정을 내릴 수 있게 합니다.

정밀도 설정은 무엇을 하나요?

정밀도 설정(0-8)은 SVG 내의 숫자 값, 특히 경로 데이터 좌표와 변환 값에서 유지할 소수점 자릿수를 제어합니다. 낮은 정밀도(1-2)는 더 작은 파일을 만들지만 복잡한 SVG에서 눈에 보이는 왜곡을 유발할 수 있습니다. 기본 정밀도 3은 대부분의 SVG에 좋은 균형입니다. 간단한 아이콘은 정밀도 1-2로 충분하고, 복잡한 일러스트레이션은 정밀도 4-5를 권장합니다.

멀티패스 모드란 무엇인가요?

멀티패스 모드는 더 이상 크기 감소가 없을 때까지 SVGO 최적화 파이프라인을 여러 번 실행합니다. 단일 패스로는 이전 변환 후에만 드러나는 최적화 기회를 놓칠 수 있습니다. 예를 들어, 그룹 축소 후 새로 병합 가능한 경로가 나타날 수 있습니다. 멀티패스는 일반적으로 단일 패스보다 1-5% 추가 감소를 달성합니다.

어떤 SVGO 플러그인이 안전한가요?

preset-default의 33개 플러그인은 대부분의 SVG에 안전하며 기본적으로 활성화되어 있습니다. 그러나 특정 경우에 문제를 일으킬 수 있는 플러그인이 있습니다: convertShapeToPath는 특정 도형 요소를 대상으로 하는 CSS 애니메이션에 문제를 일으킬 수 있고, inlineStyles는 스타일이 많은 요소에서 공유되는 경우 파일 크기를 증가시킬 수 있습니다. 최적화된 SVG가 원본과 다르게 보이면 플러그인을 하나씩 비활성화하여 원인을 찾으세요.

코드 예제

import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';

function optimizeSvg(svgString, options = {}) {
  const { precision = 3, multipass = true, prettify = false } = options;

  const result = optimize(svgString, {
    multipass,
    floatPrecision: precision,
    js2svg: { pretty: prettify, indent: 2 },
    plugins: ['preset-default'],
  });

  const originalSize = Buffer.byteLength(svgString, 'utf8');
  const optimizedSize = Buffer.byteLength(result.data, 'utf8');
  const reduction = Math.round((1 - optimizedSize / originalSize) * 100);

  return { data: result.data, originalSize, optimizedSize, reduction };
}

const svg = readFileSync('icon.svg', 'utf8');
const result = optimizeSvg(svg, { precision: 2 });
console.log(`${result.originalSize} -> ${result.optimizedSize} (${result.reduction}% reduction)`);
writeFileSync('icon.min.svg', result.data);