SVG 압축기

언제 사용하나요?

인라인 SVG를 코드에 넣기 전에 사람이 만든 공백과 주석을 줄이고 싶을 때 사용합니다.

사용 방법

• SVG 코드를 붙여넣습니다.
• 압축 결과와 길이 변화를 확인합니다.
• 필요하면 결과를 복사합니다.

입력값 안내

최적화할 원본 SVG 코드를 텍스트 영역에 입력합니다.

계산·변환 기준

정규표현식과 문자열 처리 로직을 통해 불필요한 줄바꿈, 다중 공백, HTML 주석(<!-- -->) 등을 안전하게 제거하여 파일 용량을 최적화합니다.

사용 예시

• 인라인 SVG 정리 - 불필요한 공백을 줄여 코드 삽입용 SVG를 만듭니다.
• 업로드 전 이미지 준비 - 작업 결과를 미리 확인한 뒤 블로그, 쇼핑몰, SNS에 올릴 이미지 파일을 정리합니다.
• 작업 결과 비교 - 원본과 결과 이미지를 나란히 확인하며 품질과 용량, 표시 상태를 점검합니다.

예시

• 주석과 들여쓰기가 많은 5KB SVG 코드 → 불필요한 공백과 주석이 제거된 3KB 코드로 압축
• 편집기에서 내보낸 SVG의 주석·공백 제거로 코드 용량 절감

주의사항

• 브라우저 캔버스를 이용해 이미지를 처리하므로 원본 메타데이터(EXIF)가 손실되거나 투명 영역 색상이 변할 수 있습니다.
• 브라우저 환경의 이미지 디코딩 용량 한계로 인해, 지나치게 해상도가 높은 대용량 원본 파일의 변환은 실패할 수 있습니다.

자주 묻는 질문

고급 최적화도 하나요?

기본 문자열 정리 중심입니다. path 병합 같은 고급 최적화는 전문 도구가 필요합니다.

SVG 코드가 서버로 전송되나요?

아니요. 공백·주석 정리는 브라우저 안에서 처리되어 코드가 외부로 전송되지 않습니다.

얼마나 줄어드나요?

주석과 들여쓰기 공백이 많을수록 절감 폭이 커지며, 보통 수십 퍼센트까지 용량이 줄어듭니다.

압축하면 모양이 달라지나요?

주석과 불필요한 공백만 제거하므로 화면에 그려지는 모양은 그대로 유지됩니다.

관련 도구

• SVG 미리보기 - SVG 코드를 브라우저에서 이미지로 렌더링해 미리봅니다.
• SVG → PNG 변환기 - SVG 코드를 Canvas에 렌더링해 PNG 이미지로 저장합니다.
• HTML 포매터 - 한 줄로 압축되거나 들여쓰기가 엉망인 HTML 코드를 태그 계층에 맞춰 줄바꿈과 들여쓰기로 정리합니다. CMS·API에서 받은 HTML 응답을 분석할 때 특히 유용합니다.
• SVG 색상 치환기 - SVG 코드의 fill/stroke 색상 값을 원하는 색상으로 일괄 치환합니다.
• 이미지 리사이즈 - 여러 이미지를 서버 업로드 없이 브라우저에서 비율을 유지하며 리사이즈합니다. JPEG·PNG·WebP 등을 지원하며 최대 가로·세로 픽셀을 지정하면 해상도가 일괄 축소됩니다.
• 이미지 크롭 - 픽셀 좌표를 입력해 이미지의 필요한 영역만 브라우저에서 잘라냅니다.