SVG 최적화
SVG 마크업을 기준으로 빠르게 점검합니다.
최적화 설정
값을 낮추면 파일은 작아질 수 있지만 path가 달라질 수 있습니다.
SVG 최적화 기준
불필요한 마크업 줄이기
디자인 도구에서 내보낸 SVG에는 렌더링 결과를 바꾸지 않으면서 바이트만 늘리는 메타데이터, 주석, 편집기 namespace, 보이지 않는 마크업이 들어갈 수 있습니다.
좌표 정밀도 조정
10.5432109 같은 좌표는 작은 아이콘 렌더링에서는 눈에 띄는 차이 없이 10.54처럼 줄일 수 있는 경우가 많습니다.
중요 속성 보존
viewBox, fill, stroke, ARIA label, 중요한 ID가 렌더링, 스타일링, 애니메이션, 접근성에 영향을 준다면 유지해야 합니다.
자주 묻는 질문
최적화한 SVG가 흐릿해지나요?
아니요. SVG는 벡터 기반이므로 최적화는 이미지를 래스터화하는 대신 마크업을 줄입니다. 다만 path 값을 너무 과하게 반올림하면 모양이 달라질 수 있습니다.
최적화한 SVG가 더 커질 수도 있나요?
원본 파일이 이미 잘 압축되었거나 손으로 최적화되어 있으면 제거할 부분이 거의 없을 수 있습니다. 이런 경우 결과 크기가 비슷하거나 조금 커질 수 있습니다.
일괄 최적화도 지원하나요?
이 페이지는 단일 파일 점검과 조정을 위한 도구입니다. 일괄 최적화는 파이프라인에서 SVGO 같은 빌드 단계 도구를 사용하세요.
SVG 최적화가 애니메이션이나 스타일링을 깨뜨릴 수 있나요?
네. CSS나 JavaScript가 의존하는 ID, class, 메타데이터, 정밀도를 최적화 도구가 제거하면 문제가 생길 수 있습니다. 인터랙티브 SVG는 결과를 미리보고 중요한 속성을 유지하세요.
장식용 SVG에도 접근성 label이 필요하나요?
장식용 SVG는 보조 기술에서 숨길 수 있는 경우가 많습니다. 정보를 전달하는 아이콘과 일러스트레이션은 의미 있는 title, label 또는 주변 텍스트를 유지해야 합니다.