SVG 최적화
SVG 파일 용량을 줄이고 최적화된 코드를 확인합니다.
개념 설명
SVG 최적화는 웹에 넣을 SVG를 가볍게 만드는 정리 작업입니다
아이콘, 일러스트, 배너에 쓰는 SVG 코드를 모양을 유지한 채 불필요한 부분을 정리해 업로드 비용과 렌더 비용을 줄입니다.
SVG 최적화는 주로 웹 서비스에 배포하기 전에 불필요한 XML 선언, 주석, 메타데이터, 공백을 줄여 파일을 가볍게 만듭니다.
아이콘 라이브러리나 일러스트 모음처럼 다수의 벡터 파일을 반복 배포할 때 용량 절감 효과가 커져 로딩 속도와 대역폭에 유리합니다.
어디에 쓰이나요?
웹폰트 아이콘, 인라인 SVG 버튼, 앱 배지, 다국어 배너 일러스트의 배포 전후 처리 단계에서 파일 크기를 줄이는 용도로 사용합니다.
무엇을 정리하나요?
XML 선언, doctype, 주석, 메타데이터를 제거하고 요소 사이와 등호 주변의 공백, 중복 공백을 정리해 SVG 코드를 줄입니다.
최종 확인 포인트
최적화 전후로 viewBox, 아이콘/일러스트 형태, aria-label이나 role 같은 접근성 속성이 유지되는지 미리보기를 비교해 확인합니다.
시각 결과가 보존되는지(모양·크기·자간/정렬)와 스크린리더가 사용하는 접근성 정보 누락이 없는지 꼭 체크한 뒤 배포하세요.
SVG 최적화 SVG 최적화 작업 영역
SVG 입력
최적화된 SVG
사용 방법
- 1 SVG 코드를 붙여넣거나 SVG 파일을 드래그해 입력합니다.
- 2 SVG 최적화 버튼을 눌러 불필요한 코드를 줄입니다.
- 3 미리보기와 용량 변화를 확인한 뒤 코드 복사 또는 다운로드를 사용합니다.
대표적인 사용 사례
- SVG 주석과 메타데이터 제거
- SVG 파일 용량 줄이기
- 최적화 SVG 미리보기와 다운로드
자주 묻는 질문
SVG는 어떻게 입력하나요?
SVG 코드를 붙여넣거나 .svg 파일을 드롭하면 입력창에 들어가고 최적화를 실행할 수 있습니다.
최적화는 어떤 내용을 줄이나요?
XML 선언, 주석, doctype, metadata 태그를 제거하고 공백을 정리해 SVG 코드를 더 짧게 만듭니다.
결과를 복사하거나 다운로드할 수 있나요?
네. 최적화된 SVG 코드를 복사하거나 optimized.svg 파일로 다운로드할 수 있으며, 미리보기도 함께 표시됩니다.