Loading…

소개 온라인 SVG 비티파이어 & 미니파이어

지저분하거나 너무 큰 SVG 파일로 작업 중이신가요? 코드를 붙여넣거나 `.svg` 파일을 업로드하고, **형식화**를 선택해 예쁘게 만들거나 **미니파이**를 선택해 크기를 줄인 후 즉시 깔끔하고 최적화된 SVG 마크업을 얻으세요. 디자이너, 프론트엔드 개발자 및 빠르고 안전한 벡터 최적화가 필요한 모든 분에게 완벽합니다. 🚀

우리 SVG 포맷터의 주요 기능

  • **비티파이 모드** - 스마트 들여쓰기, 줄 바꿈 및 속성 정렬
  • **미니파이 모드** - 공백, 주석 및 불필요한 메타데이터 제거
  • 내부적으로 Prettier 스타일 형식화와 SVGO 스타일 최적화 사용
  • 구성 가능한 들여쓰기 스타일 (공백 또는 탭) 및 들여쓰기 크기
  • 선택적 줄 바꿈 컬럼으로 긴 경로와 속성을 깔끔하게 유지
  • 일관된 줄 끝 스타일(LF/CRLF)로 OS 간 깔끔한 diff 유지
  • 최대 5MB 크기의 `.svg` 파일 드래그 앤 드롭 또는 인라인 SVG 마크업 붙여넣기
  • 100% 클라이언트 측 처리 — 아트워크가 브라우저를 벗어나지 않음
  • 서식 지정된(`.formatted.svg`) 또는 최소화된(`.min.svg`) 출력을 한 번의 클릭으로 복사 또는 다운로드
  • 노트북, 데스크톱, 태블릿에서 원활하게 작동하는 반응형 UI

🔧 SVG 서식 지정 또는 최소화 방법: 빠른 가이드 for svg-formatter

1

1. SVG 붙여넣기 또는 업로드

📥 `.svg` 파일을 드래그 앤 드롭하거나 원시 SVG 마크업을 편집기에 붙여넣으세요. 도구가 표준 `image/svg+xml` 콘텐츠를 자동으로 감지합니다.

2

2. 서식 지정 또는 최소화 선택

✨ 사람이 읽기 쉬운 마크업을 위해 **서식 지정**(리뷰 및 버전 관리에 적합) 또는 가능한 가장 작은 파일 크기를 위한 **최소화**를 선택하세요.

3

3. 서식 지정 옵션 조정

⚙️ **들여쓰기 스타일**(공백 또는 탭), **들여쓰기 크기** 및 선택적 **줄 바꿈/줄 길이**를 조정하세요. 이들은 기본 서식 지정기 설정에 직접 매핑됩니다.

4

4. 미리보기 및 내보내기

👀 최적화된 SVG 코드를 검사하고 프로젝트에서 빠르게 테스트한 후 클립보드에 복사하거나 새 `.svg` 파일로 결과를 다운로드하세요.

기술적 세부사항

예쁘게 만들기 엔진(서식 모드)

서식 모드는 SVG XML 마크업에 맞춰진 Prettier 스타일 엔진을 사용합니다. 가독성과 안정적이고 예측 가능한 diff에 중점을 둡니다.

항목동작참고
들여쓰기 스타일공백 또는 탭**들여쓰기 스타일**을 통해 구성 가능(`indentStyle`에 매핑).
들여쓰기 크기1–8 공백공백 사용 시 중첩 너비 제어(`indentSize`에 매핑).
줄 바꿈/줄 길이0–120 열`0`은 줄 바꿈 비활성화, 그렇지 않으면 긴 줄이 선택된 열 주변으로 줄 바꿈됨(`wrapLineLength`에 매핑).
줄 끝LF(`\n`) 또는 CRLF(`\r\n`)OS 간 줄 끝 일관성 유지(`endOfLine`에 매핑).
출력 언어XML 스타일 SVG안전한 임베딩을 위해 SVG 호환 XML 구조를 유지합니다.

최소화 파이프라인 (최소화 모드)

최소화 모드는 시각적 출력을 유지하면서 크기 감소에 중점을 둔 SVGO 기반 파이프라인을 사용합니다.

단계설명영향
주석 제거렌더링에 영향을 주지 않는 `<!-- ... -->` 주석 노드를 제거합니다.더 작은 파일, 더 깔끔한 diff.
불필요한 공백 제거불필요한 공백, 탭 및 줄 바꿈을 축소합니다.장황한 편집기 내보내기 SVG에 큰 효과.
메타데이터 정리안전한 경우 렌더링되지 않는 메타데이터 노드를 선택적으로 제거합니다.공개 프로덕션 에셋에 적합.
속성 정규화속성을 안정적인 방식으로 단순화하고 재정렬합니다.더 컴팩트한 출력, 더 나은 캐시 가능성.

인코딩 및 호환성

출력은 현대 브라우저 및 도구와 호환되는 UTF-8 SVG이며 SVG 2 사양에 부합합니다.

성능 및 제한 (일반 데스크톱 브라우저)

파일 유형입력 크기정리 시간최소화 시간일반 크기 감소율
아이콘5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
일러스트레이션100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
히어로 그래픽500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
실제 성능은 CPU, 브라우저 및 SVG 복잡도에 따라 달라집니다.

파워 유저를 위한 CLI 대안

터미널 워크플로우나 CI 통합을 선호하시나요? Prettier와 SVGO를 결합하여 이 도구와 유사한 동작을 구현하세요:

리눅스 / 🍎 macOS

Prettier로 SVG 예쁘게 만들기

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

SVG 마크업에 일관된 들여쓰기와 줄 바꿈을 적용합니다.

SVGO로 SVG 최소화하기

npx svgo input.svg -o input.min.svg

주석, 메타데이터 및 불필요한 공백을 제거하여 파일 크기를 줄입니다.

윈도우 (PowerShell 또는 CMD)

xmlstarlet을 사용하여 SVG 예쁘게 출력하기 (WSL 또는 네이티브)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

2칸 들여쓰기로 SVG/XML을 포맷합니다.

SVGO로 SVG 최소화하기 (전역 설치 없음)

npx svgo input.svg -o min.svg

일회성 최적화를 위해 `npx`를 통해 SVGO를 직접 실행합니다.

빌드나 pre-commit 훅에 Prettier + SVGO를 추가하여 디자이너가 원본 SVG를 내보내고 파이프라인이 최적화된 상태를 유지하도록 하세요.

실용적인 적용 사례

웹 성능 & 프론트엔드 번들

  • 디자인 시스템, 아이콘 세트 및 스프라이트 시트에서 SVG 페이로드 줄이기
  • HTML/CSS에 최소화된 SVG를 인라인으로 삽입하여 추가 HTTP 요청 절약
  • 랜딩 페이지의 히어로 일러스트레이션을 축소하여 Core Web Vitals 개선
<img src="/assets/hero.min.svg" alt="최적화된 히어로 그래픽" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

디자인 인계 및 버전 관리

  • 코드 리뷰 전에 내보낸 SVG를 예쁘게 만들어 diff를 읽기 쉽게 하기
  • 협업을 위한 `.formatted.svg`와 프로덕션을 위한 `.min.svg` 유지하기
  • 디자인 시스템 전체에 걸쳐 일관된 들여쓰기와 속성 순서 적용

모바일, 이메일 및 하이브리드 앱

  • HTML 이메일의 인라인 SVG를 최소화하여 가벼운 캠페인 만들기
  • 많은 아이콘을 제공할 때 React Native / Capacitor / Ionic에서 앱 번들 크기 줄이기
  • 느리거나 제한된 연결을 사용하는 사용자의 대역폭을 절약하세요.

❓ Frequently Asked Questions

❓SVG 포맷팅이란 무엇인가요?

포맷팅(또는 예쁘게 만들기)은 일관된 들여쓰기, 줄 바꿈 및 속성 순서로 SVG 마크업을 재구성합니다. 이미지 렌더링 방식은 변경하지 않고 코드의 모양과 diff 동작만 변경합니다.

📏최소화 작업이 SVG의 외관을 변경하나요?

일반적인 경우에는 아닙니다. 최소화는 주석, 불필요한 공백 및 렌더링되지 않는 메타데이터를 제거합니다. 시각적 결과를 보존하면서 크기를 줄이도록 설계되었습니다. 편집 도구를 위한 특수 메타데이터에 의존하는 경우 원본 파일의 백업을 유지하세요.

🔒제 SVG가 서버에 업로드되나요?

절대 아닙니다. 모든 포맷팅 및 최소화 작업은 JavaScript/WebAssembly를 사용하여 완전히 귀하의 브라우저에서 실행됩니다. 귀하의 SVG 파일은 어떤 서버로도 전송되거나 원격으로 저장되지 않습니다.

🚀최소화로 얼마나 많은 크기를 절약할 수 있나요?

실제 절감량은 일반적으로 **30%에서 70% 사이**이며, SVG가 어떻게 내보내졌는지와 포함된 메타데이터나 공백의 양에 따라 달라집니다.

⚠️`<metadata>`나 주석을 제거하면 워크플로우가 깨질 수 있나요?

공개 웹 그래픽의 경우 메타데이터와 주석을 제거하는 것이 일반적으로 안전합니다. 그러나 디자인 도구가 해당 섹션에 편집 데이터나 라이선스 정보를 저장하는 경우 향후 편집을 위해 버전 관리 시스템에 원본, 최소화되지 않은 사본을 보관하세요.

Pro Tips

Best Practice

리포지토리에 최소화되지 않은 `icon.formatted.svg`를 유지하여 깔끔한 diff를 확인하고, 빌드 단계의 일부로 `icon.min.svg`를 생성하세요.

Best Practice

최소화하기 전에 항상 의미 있는 `<title>` 및 `<desc>` 요소를 포함하여 스크린 리더가 SVG에 접근할 수 있도록 하세요.

Best Practice

SVG 최소화와 HTTP 압축(Gzip/Brotli)을 결합하여 무거운 일러스트레이션과 차트에서 더 많은 바이트를 압축하세요.

Best Practice

아이콘 세트의 경우 스프라이트 전략을 고려하세요: 한 번 최소화한 후 SVG 코드를 모든 곳에 복제하는 대신 `<use>`를 통해 아이콘을 참조하세요.

Additional Resources

W3C SVG 2 사양
Technical specification
MDN 웹 문서: SVG
Documentation
SVGO (GitHub)
Documentation
Prettier XML / SVG 포맷팅
Documentation

Other Tools