`, `<desc>` 등 사용되지 않는 태그. - **예시**: ```xml  <?xml version="1.0" encoding="UTF-8"?> <svg width="100" height="100"> <metadata>Generated by Illustrator</metadata> <circle cx="50" cy="50" r="40"/> </svg>  <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg> ``` #### 2. 속성 간소화 SVG 속성에서 소수점이나 단위를 줄이고 중복된 스타일을 통합합니다. - **소수점 정밀도 줄이기**: `cx="50.000"` → `cx="50`. - **단위 생략**: SVG는 기본적으로 단위가 사용자 단위로 간주되므로 `px` 생략 가능. - **중복 스타일 통합**: `<g>` 태그나 CSS로 공통 스타일 적용. - **예시**: ```xml  <svg width="100.00px" height="100.00px"> <circle cx="50.000" cy="50.000" r="40.000" fill="#ff0000"/> <rect x="10.000" y="10.000" width="20.000" height="20.000" fill="#ff0000"/> </svg>  <svg width="100" height="100"> <g fill="red"> <circle cx="50" cy="50" r="40"/> <rect x="10" y="10" width="20" height="20"/> </g> </svg> ``` #### 3. 경로 데이터(`path`) 최적화 `<path>` 요소의 `d` 속성은 복잡한 좌표로 인해 길어질 수 있습니다. - **명령어 단순화**: 동일한 명령어 반복 시 좌표만 나열(예: `L10 10 L20 20` → `L10 10 20 20`). - **상대 좌표 사용**: `m`, `l` 등으로 절대 좌표보다 짧게 표현. - **점 개수 줄이기**: 베지어 곡선에서 불필요한 점 제거. - **예시**: ```xml  <path d="M10 10 L20 20 L30 30 L40 40" stroke="black"/>  <path d="M10 10l10 10 10 10 10 10" stroke="black"/> ``` #### 4. 요소 통합 및 간소화 중복되거나 불필요한 요소를 제거하고, 복잡한 도형을 단순화합니다. - **중첩된 `<g>` 제거**: 불필요한 그룹화 해소. - **도형 합치기**: 여러 `<path>`를 하나의 경로로 통합. - **예시**: ```xml  <g><g><circle cx="50" cy="50" r="40"/></g></g>  <circle cx="50" cy="50" r="40"/> ``` #### 5. 압축 및 인라인 사용 - **Gzip 압축**: 서버에서 SVG 파일을 압축해 전송. - **인라인 SVG**: HTML에 직접 삽입해 HTTP 요청 감소. - **예시**: ```html  <img src="icon.svg">  <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg> ``` #### 6. 최적화 도구 활용 수작업 외에도 자동화 도구를 사용하면 효율적으로 최적화할 수 있습니다. - **SVGO (SVG Optimizer)**: Node.js 기반 도구로 메타데이터 제거, 속성 간소화 등을 자동 수행. - 설치: `npm install -g svgo` - 사용: `svgo input.svg -o output.svg` - **온라인 도구**: SVGOMG (SVGO의 웹 버전), Jake Archibald의 SVG Compressor. --- ### 실무 적용 방법 1. **디자인 툴 설정**: - Illustrator에서 "SVG 내보내기" 시 "최소화" 옵션 체크. - Figma에서 "SVG 코드 복사" 후 불필요한 속성 제거. 2. **개발 워크플로우**: - 빌드 과정에 SVGO 통합(예: Webpack 플러그인 `svgo-loader`). - CSS 스프라이트 대신 `<symbol>`과 `<use>`로 아이콘 관리. 3. **성능 테스트**: - 브라우저 개발자 도구로 렌더링 시간 확인. - Lighthouse로 페이지 로드 성능 점검. #### 최적화 전후 비교 ```xml  <?xml version="1.0" encoding="UTF-8"?> <svg width="100.00px" height="100.00px" xmlns="http://www.w3.org/2000/svg"> <metadata>Generated by Tool</metadata> <circle cx="50.000" cy="50.000" r="40.000" fill="#ff0000" stroke="#000000" stroke-width="2.000"/> </svg>  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2"/></svg> ``` --- ### 주의사항 - **기능 유지**: 최적화로 인해 필수 속성(예: `viewBox`)이 제거되지 않도록 확인. - **호환성**: 오래된 브라우저를 지원해야 한다면 XML 선언이나 네임스페이스 유지 고려. - **테스트**: 최적화 후 시각적 변화가 없는지 반드시 검토. --- ### 결론 SVG 최적화는 파일 크기를 줄이고 렌더링 속도를 높여 웹 성능을 개선하는 필수 과정입니다. 메타데이터 제거, 속성 간소화, 경로 최적화 등의 수작업과 SVGO 같은 도구를 병행하면 효율적인 결과를 얻을 수 있습니다. 실무에서는 디자인 단계부터 최적화를 고려하고, 빌드 프로세스에 자동화를 통합하며, 사용자 경험을 저해하지 않도록 주의 깊게 진행해야 합니다. 최적화된 SVG는 빠른 로딩과 부드러운 인터랙션을 보장하며, 특히 모바일 환경에서 그 가치를 발휘합니다.

### SVG 최적화에 대한 가이드 SVG(Scalable Vector Graphics)는 벡터 기반 그래픽으로, 크기 조정 시 품질 저하가 없고 파일 크기가 상대적으로 작아 웹에서 널리 사용됩니다. 그러나 SVG 파일이 불필요한 데이터나 복잡한 구조를 포함하면 성능 저하와 로딩 속도 문제가 발생할 수 있습니다. SVG 최적화는 파일 크기를 줄이고 렌더링 효율성을 높여 웹 성능을 개선하는 과정입니다. 아래에서는 SVG 최적화의 필요성, 주요 기법, 그리고 실무에서의 적용 방법을 설명합니다. --- ### SVG 최적화의 필요성 1. **파일 크기 감소**: 불필요한 메타데이터나 중복 코드가 포함된 SVG는 용량이 커져 페이지 로드 시간을 늘립니다. 2. **렌더링 성능 향상**: 복잡한 경로(`path`)나 과도한 요소는 브라우저의 렌더링 부담을 가중시킵니다. 3. **네트워크 효율성**: 모바일 환경에서 작은 파일 크기는 데이터 사용량을 줄이고 사용자 경험을 개선합니다. 4. **유지보수성**: 최적화된 코드는 읽기 쉽고 수정이 용이합니다. --- ### SVG 최적화 기법 #### 1. 불필요한 메타데이터 제거 디자인 툴(예: Adobe Illustrator, Sketch)에서 내보낸 SVG 파일은 제작 소프트웨어 정보, 주석, XML 선언 등 불필요한 데이터를 포함합니다. - **제거 대상**: - `` (현대 브라우저에서는 생략 가능). - ``, ``, `<desc>` 등 사용되지 않는 태그. - **예시**: ```xml  <?xml version="1.0" encoding="UTF-8"?> <svg width="100" height="100"> <metadata>Generated by Illustrator</metadata> <circle cx="50" cy="50" r="40"/> </svg>  <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg> ``` #### 2. 속성 간소화 SVG 속성에서 소수점이나 단위를 줄이고 중복된 스타일을 통합합니다. - **소수점 정밀도 줄이기**: `cx="50.000"` → `cx="50`. - **단위 생략**: SVG는 기본적으로 단위가 사용자 단위로 간주되므로 `px` 생략 가능. - **중복 스타일 통합**: `<g>` 태그나 CSS로 공통 스타일 적용. - **예시**: ```xml  <svg width="100.00px" height="100.00px"> <circle cx="50.000" cy="50.000" r="40.000" fill="#ff0000"/> <rect x="10.000" y="10.000" width="20.000" height="20.000" fill="#ff0000"/> </svg>  <svg width="100" height="100"> <g fill="red"> <circle cx="50" cy="50" r="40"/> <rect x="10" y="10" width="20" height="20"/> </g> </svg> ``` #### 3. 경로 데이터(`path`) 최적화 `<path>` 요소의 `d` 속성은 복잡한 좌표로 인해 길어질 수 있습니다. - **명령어 단순화**: 동일한 명령어 반복 시 좌표만 나열(예: `L10 10 L20 20` → `L10 10 20 20`). - **상대 좌표 사용**: `m`, `l` 등으로 절대 좌표보다 짧게 표현. - **점 개수 줄이기**: 베지어 곡선에서 불필요한 점 제거. - **예시**: ```xml  <path d="M10 10 L20 20 L30 30 L40 40" stroke="black"/>  <path d="M10 10l10 10 10 10 10 10" stroke="black"/> ``` #### 4. 요소 통합 및 간소화 중복되거나 불필요한 요소를 제거하고, 복잡한 도형을 단순화합니다. - **중첩된 `<g>` 제거**: 불필요한 그룹화 해소. - **도형 합치기**: 여러 `<path>`를 하나의 경로로 통합. - **예시**: ```xml  <g><g><circle cx="50" cy="50" r="40"/></g></g>  <circle cx="50" cy="50" r="40"/> ``` #### 5. 압축 및 인라인 사용 - **Gzip 압축**: 서버에서 SVG 파일을 압축해 전송. - **인라인 SVG**: HTML에 직접 삽입해 HTTP 요청 감소. - **예시**: ```html  <img src="icon.svg">  <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg> ``` #### 6. 최적화 도구 활용 수작업 외에도 자동화 도구를 사용하면 효율적으로 최적화할 수 있습니다. - **SVGO (SVG Optimizer)**: Node.js 기반 도구로 메타데이터 제거, 속성 간소화 등을 자동 수행. - 설치: `npm install -g svgo` - 사용: `svgo input.svg -o output.svg` - **온라인 도구**: SVGOMG (SVGO의 웹 버전), Jake Archibald의 SVG Compressor. --- ### 실무 적용 방법 1. **디자인 툴 설정**: - Illustrator에서 "SVG 내보내기" 시 "최소화" 옵션 체크. - Figma에서 "SVG 코드 복사" 후 불필요한 속성 제거. 2. **개발 워크플로우**: - 빌드 과정에 SVGO 통합(예: Webpack 플러그인 `svgo-loader`). - CSS 스프라이트 대신 `<symbol>`과 `<use>`로 아이콘 관리. 3. **성능 테스트**: - 브라우저 개발자 도구로 렌더링 시간 확인. - Lighthouse로 페이지 로드 성능 점검. #### 최적화 전후 비교 ```xml  <?xml version="1.0" encoding="UTF-8"?> <svg width="100.00px" height="100.00px" xmlns="http://www.w3.org/2000/svg"> <metadata>Generated by Tool</metadata> <circle cx="50.000" cy="50.000" r="40.000" fill="#ff0000" stroke="#000000" stroke-width="2.000"/> </svg>  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2"/></svg> ``` --- ### 주의사항 - **기능 유지**: 최적화로 인해 필수 속성(예: `viewBox`)이 제거되지 않도록 확인. - **호환성**: 오래된 브라우저를 지원해야 한다면 XML 선언이나 네임스페이스 유지 고려. - **테스트**: 최적화 후 시각적 변화가 없는지 반드시 검토. --- ### 결론 SVG 최적화는 파일 크기를 줄이고 렌더링 속도를 높여 웹 성능을 개선하는 필수 과정입니다. 메타데이터 제거, 속성 간소화, 경로 최적화 등의 수작업과 SVGO 같은 도구를 병행하면 효율적인 결과를 얻을 수 있습니다. 실무에서는 디자인 단계부터 최적화를 고려하고, 빌드 프로세스에 자동화를 통합하며, 사용자 경험을 저해하지 않도록 주의 깊게 진행해야 합니다. 최적화된 SVG는 빠른 로딩과 부드러운 인터랙션을 보장하며, 특히 모바일 환경에서 그 가치를 발휘합니다.