본문으로 건너뛰기
viewsvg
ko

SVG 최적화 도구

편집기 메타데이터, 불필요한 그룹, 남는 소수점을 제거해 SVG 파일을 줄이세요. 전후 미리보기를 나란히 보여 주므로 모양이 깨질 걱정이 없습니다.

SVG 코드

여기에 SVG 파일을 놓으세요

또는 편집기에 SVG 코드를 붙여넣으세요.

아이콘 28,000+개 둘러보기

SVG는 이 기기에만 머뭅니다. 아무것도 업로드되지 않습니다.

키보드 단축키

파일 열기
⌘/Ctrl O
SVG 다운로드
⌘/Ctrl S
SVG 붙여넣기 (편집기 밖에서)
⌘/Ctrl V
확대 / 축소
+ −
마우스로 확대/축소
⌘/Ctrl + 스크롤
화면에 맞추기
F
실제 크기
1
배경 전환
B
윤곽선 모드
O
픽셀 격자
G
이동
드래그 또는 스크롤

URL에서 열기

브라우저가 파일을 직접 가져옵니다. 서버가 교차 출처 요청(CORS)을 허용하는 경우에만 작동합니다.

SVG 최적화 도구 사용 방법

  1. 1

    SVG 열기

    Figma, Illustrator, Inkscape, Sketch에서 내보낸 SVG 파일을 하나 또는 여러 개 놓으세요.

  2. 2

    설정 조정

    숫자 정밀도와 ID 유지, width·height 제거 같은 옵션을 조정하세요. 전후 미리보기가 바로 업데이트됩니다.

  3. 3

    적용 또는 다운로드

    결과를 편집기에 적용하거나(실행 취소 가능), 복사하거나, 최적화된 파일을 다운로드하세요.

SVG 최적화 도구가 제거하는 것

디자인 도구는 브라우저가 쓰지 않는 코드를 많이 만들어 냅니다. 최적화 도구는 이미지를 그대로 유지하면서 그런 코드를 제거합니다.

  • 편집기 메타데이터, 주석, Illustrator·Inkscape·Sketch 네임스페이스
  • 숨겨진 요소와 빈 요소, 사용하지 않는 defs, 불필요한 그룹
  • 좌표의 남는 소수점(정밀도 슬라이더로 조절)
  • 긴 패스 명령(같은 의미의 더 짧은 형태로 다시 작성)
  • 기본 속성 값과 중복된 스타일

SVG 파일을 최적화해야 하는 이유

SVG가 작을수록 빨리 로드되어 Core Web Vitals에 도움이 됩니다. 특히 HTML의 인라인 SVG, 아이콘 스프라이트, React 컴포넌트에서는 모든 바이트가 JavaScript 번들에 포함되므로 더욱 중요합니다. 코드가 깔끔하면 읽기도, 색을 바꾸기도, 애니메이션을 넣기도 쉬워집니다.

원본 크기뿐 아니라 gzip 크기도 확인하세요. 서버가 실제로 보내는 크기에 더 가깝습니다.

SVG 작업에 필요한 모든 기능

SVG 최적화 도구는 SVG 파일을 보고, 편집하고, 최적화하고, 변환하는 하나의 작업 공간에 포함되어 있습니다. 가입, 광고, 업로드가 없습니다.

즉시 미리보기

최대 6400%까지 확대, 이동, 화면에 맞추기, 투명·흰색·검은색 또는 원하는 배경에서 SVG를 확인하세요.

실시간 코드 편집기

구문 강조, 오류 줄 표시, 정리 및 압축, 검색, 전체 실행 취소 기록.

윤곽선 및 픽셀 격자

윤곽선 모드로 모든 패스를 보고, 확대했을 때 격자로 픽셀 정렬을 확인하세요.

정보 확인

파일 크기와 gzip 크기, viewBox, 마우스를 올리면 강조되는 요소 트리, 클릭 한 번으로 색상 바꾸기.

SVGO로 최적화

전후 미리보기와 조절 가능한 정밀도로 파일을 줄이세요. 열린 모든 파일을 한 번에 최적화할 수 있습니다.

PNG, JPG, WebP, ICO

최대 16384px까지 원하는 크기로 투명도를 유지한 채 내보내거나, PNG를 클립보드에 바로 복사하세요.

React, Vue, Svelte

currentColor와 props를 지원하는 깔끔한 JSX/TSX, React Native, Vue, Svelte 컴포넌트.

여러 파일을 한 번에

여러 SVG를 탭으로 열고 일괄 최적화하거나 SVG 또는 PNG를 ZIP으로 다운로드하세요.

프라이빗 & 오프라인

업로드도 계정도 없습니다. 작업 내용은 브라우저에 저장되며, 첫 방문 후에는 오프라인에서도 작동합니다.

자주 묻는 질문

SVG가 얼마나 작아지나요?

디자인 도구에서 내보낸 파일은 SVGO가 메타데이터, 주석, 숨겨진 요소, 남는 소수점을 제거하므로 30~80% 줄어드는 경우가 많습니다. 정확한 절감량은 적용하기 전에 표시됩니다.

최적화하면 SVG 모양이 바뀌나요?

기본 설정은 대부분의 파일에 안전합니다. 정밀도를 크게 낮춘다면 전후 미리보기를 비교하세요. CSS나 JavaScript에서 요소 ID를 사용한다면 'ID 유지'를 켜세요.

SVGO란 무엇인가요?

SVGO는 가장 널리 쓰이는 오픈 소스 SVG 최적화 도구입니다. viewsvg는 이를 브라우저에서 실행하므로 파일이 기기 밖으로 나가지 않습니다.

SVG 파일이 어딘가에 업로드되나요?

아니요. viewsvg는 전부 브라우저에서 실행됩니다. 파일을 읽고, 표시하고, 최적화하고, 변환하는 작업이 모두 기기에서 이루어지며 서버로 아무것도 전송되지 않습니다. 첫 방문 후에는 오프라인에서도 작동합니다.

viewsvg는 무료인가요?

네. 모든 기능이 무료이며 가입, 워터마크, 파일 개수 제한이 없습니다.

다른 무료 SVG 도구