입력
작업 공간 준비 중…
사용 방법
- SVG 소스를 붙여 넣거나 UTF-8 SVG 파일을 여세요.
- SVG 최적화를 선택하고 미리보기와 바이트 수를 비교하세요.
- SVG를 다운로드하거나 결과를 펼쳐 마크업을 확인하고 복사하세요.
벡터 마크업 최적화
SVG에는 보이는 도형 외에도 편집기 메타데이터나 길게 작성된 그리기 명령이 포함될 수 있습니다. 최적화는 이러한 마크업을 다시 작성하여 불필요한 바이트를 줄입니다.
이 도구는 좌표 정밀도를 소수 3자리로 설정한 SVGO를 사용하며 viewBox와 ID를 유지합니다. 최종 사용 환경에서 비교할 수 있도록 원본도 보관하세요.
변경될 수 있는 내용
메타데이터를 제거하고 그리기 명령을 단순화할 수 있습니다. 좌표를 소수 3자리로 처리하면 특히 아주 작거나 크게 확대된 도형의 모양이 조금 달라질 수 있습니다.
viewBox는 반응형 크기에 쓰이고 ID는 도형, 스타일이나 주변 코드에서 참조할 수 있습니다. 이 설정은 ID를 줄이거나 없애는 대신 유지합니다.
<svg viewBox="0 0 10 10"><metadata>demo</metadata><path d="M0 0 L10 10"/></svg><svg viewBox="0 0 10 10"><path d="m0 0 10 10"/></svg>메타데이터 제거와 짧아진 path를 보여 주는 축약 예입니다. 다운로드한 출력에는 SVG 네임스페이스도 포함됩니다.
미리보기와 삽입
미리보기는 결과를 페이지의 동작하는 마크업으로 삽입하지 않고 격리된 이미지로 불러옵니다. 애플리케이션에 인라인 SVG로 넣었을 때와 동작이 다를 수 있습니다.
최적화는 무해화가 아닙니다. 신뢰할 수 없는 SVG를 인라인으로 삽입하기 전에 검토하고, 주변 문서에 의존하는 스타일·참조·동작을 테스트하세요.
출력 확인과 저장
다운로드는 optimized.svg를 저장합니다. 생성된 소스와 복사 버튼은 결과를 펼치면 볼 수 있습니다. 바이트 수가 줄었다는 사실만으로 시각적으로 동일하다고 판단할 수는 없습니다.
정적 PNG, JPEG, WebP는 20 MiB, 2,400만 화소, 한 변 8,192픽셀까지 지원합니다. Base64는 2 MiB, SVG는 1 MiB입니다. 파일 검사는 최대 1 GiB이며 처음 256바이트만 읽습니다. 브라우저마다 코덱 지원이 다릅니다. 파일은 업로드되지 않습니다.
자주 묻는 질문
최적화한 SVG를 안전하게 인라인으로 삽입할 수 있나요?
최적화는 소스를 무해화하지 않습니다. 신뢰할 수 없는 요소, 속성, URL과 스타일은 애플리케이션에 인라인으로 넣기 전에 검토하세요.
viewBox와 ID는 유지되나요?
네. 이 설정은 둘 다 유지합니다. 다른 마크업은 다시 작성될 수 있으므로 실제 문서에서 참조와 스타일을 테스트하세요.
최적화로 이미지가 바뀔 수 있나요?
좌표 반올림과 구조 변경이 렌더링에 영향을 줄 수 있습니다. 미리보기를 비교하고 실제 사용할 환경에서 확인하세요.
격리된 미리보기가 실제 페이지와 다른 이유는 무엇인가요?
이미지 미리보기는 주변 페이지의 CSS나 인라인 SVG 동작을 공유하지 않습니다. 외부 맥락과 문서 수준 참조가 결과에 영향을 줄 수 있습니다.
복사 버튼은 어디에 있나요?
최적화 후 미리보기 아래의 결과를 펼치면 생성된 SVG 소스와 복사 버튼이 나타납니다. SVG 다운로드는 미리보기 위에서 사용할 수 있습니다.