SVG 벡터 그래픽 최적화 가이드: 불필요한 메타데이터 제거와 클린 코드 작성법

1. 서론: 왜 웹 아이콘의 표준은 SVG인가?

SVG(Scalable Vector Graphics)는 픽셀의 격자로 이미지를 그리는 래스터(PNG, JPG)와 달리, 수학적 좌표와 곡선 방정식(`<path>`, `<circle>`, `<rect>`)으로 화면을 정의하는 XML 기반 벡터 포맷입니다.

**무한 해상도 독립성:** 스마트폰부터 8K 레티나 디스플레이까지 어떤 크기로 확대해도 이미지가 흐려지거나 깨지지 않습니다.

**CSS / JS 제어 가능성:** 색상(`fill`, `stroke`), 크기, 호버 애니메이션을 CSS 코드로 실시간 조작할 수 있습니다.

**텍스트 기반 압축:** XML 텍스트이므로 Gzip/Brotli 웹 서버 압축 효율이 극도로 뛰어납니다.

하지만 피그마(Figma)나 일러스트레이터에서 그대로 내보낸 SVG는 프로덕션 웹 환경에 쓰기에 너무 무겁고 더러운 쓰레기 태그들로 가득 차 있습니다.

그래픽 소프트웨어는 디자이너의 작업 히스토리와 레이어 설정을 보존하기 위해 수많은 부가 정보를 SVG에 삽입합니다:

1. **에디터 전용 네임스페이스 태그:** `<adobe:...>`, `xmlns:sketch=...`, `<inkscape:...>` 등 웹 브라우저에는 아무런 의미가 없는 태그.

2. **빈 그룹 태그의 남발:** 의미 없는 `<g>` 태그가 4~5중으로 중첩되어 DOM 트리 깊이를 불필요하게 증가시킴.

3. **과도한 소수점 정밀도:** `d="M12.00034829 15.8923019..."` 처럼 픽셀 수준에서 인지 불가능한 소수점 8자리 좌표값.

4. **인라인 스타일 중복:** 고유 ID 없이 모든 패스마다 반복되는 불필요한 `style="..."` 속성.

이러한 군더더기를 제거하는 것만으로도 파일 크기를 50%~80% 즉각 감량할 수 있습니다.

반응형 웹에서 SVG가 부모 컨테이너 크기에 맞춰 유연하게 늘어나거나 줄어들게 하려면 **`viewBox`** 속성을 반드시 이해해야 합니다.

<!-- 잘못된 레거시 방식: 고정 크기 -->
<svg width="24" height="24" ...>

<!-- 모던 반응형 클린 방식 -->
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current" ...>

`viewBox="min-x min-y width height"`: 내부 좌표계의 종횡비를 정의합니다.

`width`와 `height`를 제거하고 `viewBox`만 남겨두면, CSS 유틸리티 클래스(`w-full`, `max-w-[120px]` 등)를 통해 반응형 레이아웃에 완벽히 적응합니다.

1. **소수점 정리 (Precision Truncation):** 좌표값을 소수점 1~2자리로 반올림합니다. (육안으로 차이가 전혀 없음)

2. **경로 병합 (Merge Paths):** 같은 색상과 스타일을 공유하는 여러 개의 `<path>`를 하나의 `<path d="... M... Z ...">`로 합칩니다.

3. **곡선 명령 단순화:** `<line>`, `<polyline>` 등을 최적의 베지어 곡선 명령어로 간소화합니다.

4. **CSS 상속 활용 (`currentColor`):** 고정 색상값(`#3b82f6`) 대신 `fill="currentColor"`를 부여하여 부모 텍스트의 컬러를 그대로 상속받도록 설계합니다.

5. **SVGO 자동화 도입:** CI/CD 파이프라인에 [SVGO](https://github.com/svg/svgo) 도구를 연동하여 빌드 타임에 일괄 무손실 압축을 수행합니다.

아무리 가벼운 SVG라도 스크린 리더 사용자를 배려하지 않으면 웹 표준에 어긋납니다.

**단순 장식용 아이콘:** `aria-hidden="true"`를 추가하여 스크린 리더가 불필요하게 XML 태그를 읽지 않고 건너뛰도록 합니다.

**의미가 있는 버튼/링크 아이콘:** 내부에 `<title>검색하기</title>` 태그를 넣거나 감싸는 버튼에 `aria-label="검색"`을 제공해야 합니다.

클린하게 다듬어진 SVG는 웹 성능 최적화와 사용자 경험, 그리고 접근성이라는 웹의 3대 핵심 가치를 동시에 충족하는 최고의 에셋입니다.