Question 1

SVG 최적화는 실제로 무엇을 제거하나요?

Accepted Answer

SVGO는 편집기 메타데이터, 주석, 숨겨진 레이어, 빈 그룹, 중복 속성을 제거합니다. 또한 그룹을 축소하고, 경로를 병합하고, 도형을 더 짧은 형태로 변환하며, 브라우저가 이미 기본값으로 가정하는 속성을 제거합니다.

Question 2

SVG를 언제 최적화해야 하나요?

Accepted Answer

프로덕션 배포 직전에 최적화하세요. 나중에 편집할 수 있도록 원본 SVG는 버전 관리에 보관하세요. 최적화된 SVG는 구조와 가독성이 희생되므로 편집하기 어렵습니다. 작업 파일을 최적화된 버전으로 덮어쓰지 마세요.

Question 3

최적화가 SVG 애니메이션이나 인터랙티비티를 망가뜨릴 수 있나요?

Accepted Answer

그럴 수 있습니다. SVGO는 CSS나 JavaScript가 참조하는 ID, 클래스명을 제거하거나 요소 구조를 변경할 수 있습니다. SVG에 애니메이션이 있거나 스크립트로 조작되는 경우 출력을 주의 깊게 확인하고, 필요에 따라 'cleanupIds'나 'removeUselessDefs' 같은 플러그인을 비활성화하세요.

Question 4

직접 코딩한 SVG는 왜 내보낸 것보다 최적화할 게 적나요?

Accepted Answer

Illustrator, Figma, Inkscape 같은 도구에서 내보낸 SVG에는 표시에 관계없는 애플리케이션 전용 메타데이터, 중복 변환, 빈 그룹, 편집기 주석이 많이 포함됩니다. 직접 코딩한 SVG는 이미 최소화되어 있어 제거할 내용이 적습니다.

Question 5

SVG 최적화가 렌더링 품질에 영향을 주나요?

Accepted Answer

아닙니다. SVG는 벡터 형식이며 최적화는 비시각적 데이터를 제거하거나 수학적으로 동일한 경로를 단순화할 뿐입니다. 렌더링 결과는 동일해야 합니다. 다만 매우 공격적인 경로 병합은 미세한 반올림 차이를 유발할 수 있으니, 픽셀 단위 정확도가 중요하다면 시각적 비교를 사용하세요.

SVG 최적화 도구

자주 묻는 질문

Comments & Feedback