SVG 최적화기

브라우저 처리

SVG 코드의 주석, 불필요한 공백, 메타데이터를 줄이고 데이터 URI도 함께 생성합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다.

사용 전 확인

파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.

도구 실행입력 후 결과 확인

SVG 최적화기 샘플 실행

브라우저 처리

샘플 입력

SVG 최적화기 샘플 입력
- 목적: SVG 코드의 주석, 불필요한 공백, 메타데이터를 줄이고 데이터 URI도 함께 생성합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 …
- 확인할 값: 예시 데이터를 붙여 넣고 실행합니다.

샘플 결과

SVG 최적화기 샘플 결과
입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.

자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

SVG 최적화기 사용 안내

SVG 최적화기는 SVG 코드에서 주석, 메타데이터, 불필요한 공백과 일부 보조 속성을 줄여 더 가볍게 만드는 디자인·개발 보조 도구입니다. 작은 아이콘이나 인라인 SVG를 정리할 때 빠르게 사용할 수 있습니다.

SVG 최적화기에서는 최적화할 SVG 코드를 입력 영역에 붙여 넣습니다. 최적화 버튼을 눌러 주석, 메타데이터, 공백이 정리된 결과를 확인합니다. Data URI 버튼을 누르면 CSS 배경 이미지 등에 쓸 수 있는 데이터 URI 형식으로 변환됩니다. 결과를 복사해 HTML, CSS, 디자인 시스템 코드에 적용합니다. 적용 전 실제 화면에서 아이콘 모양과 색상이 유지되는지 확인합니다.
SVG 최적화기 결과를 확인한 뒤 SVG Data URI 변환기 또는 SVG 구분선 생성기에서 다음 작업을 이어갈 수 있습니다.
SVG 최적화기: 개발 중 입력 형식과 변환·검사 결과를 작은 샘플로 대조할 때 적합합니다.

SVG 최적화기: 미리보기와 실제 화면이 다름

부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.

SVG 최적화기: 입력 형식을 인식하지 못하거나 오류 위치가 달라 보임

SVG 최적화기에서 가장 작은 샘플부터 괄호, 따옴표, 구분자와 인코딩을 순서대로 확인하세요.