html-examples/doc/svg/08_SVG 최적화.md at db94e7ced96ea390fc72fa4280c1c8e17f732023

Files

Elex db94e7ced9 2025-03-14T13:00:37

2025-03-14 13:00:37 +09:00

6.3 KiB

Raw Blame History

SVG 최적화에 대한 가이드

SVG(Scalable Vector Graphics)는 벡터 기반 그래픽으로, 크기 조정 시 품질 저하가 없고 파일 크기가 상대적으로 작아 웹에서 널리 사용됩니다. 그러나 SVG 파일이 불필요한 데이터나 복잡한 구조를 포함하면 성능 저하와 로딩 속도 문제가 발생할 수 있습니다. SVG 최적화는 파일 크기를 줄이고 렌더링 효율성을 높여 웹 성능을 개선하는 과정입니다. 아래에서는 SVG 최적화의 필요성, 주요 기법, 그리고 실무에서의 적용 방법을 설명합니다.

SVG 최적화의 필요성

파일 크기 감소: 불필요한 메타데이터나 중복 코드가 포함된 SVG는 용량이 커져 페이지 로드 시간을 늘립니다.
렌더링 성능 향상: 복잡한 경로(path)나 과도한 요소는 브라우저의 렌더링 부담을 가중시킵니다.
네트워크 효율성: 모바일 환경에서 작은 파일 크기는 데이터 사용량을 줄이고 사용자 경험을 개선합니다.
유지보수성: 최적화된 코드는 읽기 쉽고 수정이 용이합니다.

SVG 최적화 기법

1. 불필요한 메타데이터 제거

디자인 툴(예: Adobe Illustrator, Sketch)에서 내보낸 SVG 파일은 제작 소프트웨어 정보, 주석, XML 선언 등 불필요한 데이터를 포함합니다.

제거 대상:
- <?xml version="1.0" encoding="UTF-8"?> (현대 브라우저에서는 생략 가능).
- <metadata>, <title>, <desc> 등 사용되지 않는 태그.

예시:

<!-- Before -->
<?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>

<!-- After -->
<svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg>

2. 속성 간소화

SVG 속성에서 소수점이나 단위를 줄이고 중복된 스타일을 통합합니다.

소수점 정밀도 줄이기: cx="50.000" → cx="50.
단위 생략: SVG는 기본적으로 단위가 사용자 단위로 간주되므로 px 생략 가능.
중복 스타일 통합: <g> 태그나 CSS로 공통 스타일 적용.

예시:

<!-- Before -->
<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>

<!-- After -->
<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 등으로 절대 좌표보다 짧게 표현.
점 개수 줄이기: 베지어 곡선에서 불필요한 점 제거.

예시:

<!-- Before -->
<path d="M10 10 L20 20 L30 30 L40 40" stroke="black"/>

<!-- After -->
<path d="M10 10l10 10 10 10 10 10" stroke="black"/>

4. 요소 통합 및 간소화

중복되거나 불필요한 요소를 제거하고, 복잡한 도형을 단순화합니다.

중첩된 <g> 제거: 불필요한 그룹화 해소.
도형 합치기: 여러 <path>를 하나의 경로로 통합.

예시:

<!-- Before -->
<g><g><circle cx="50" cy="50" r="40"/></g></g>

<!-- After -->
<circle cx="50" cy="50" r="40"/>

5. 압축 및 인라인 사용

Gzip 압축: 서버에서 SVG 파일을 압축해 전송.
인라인 SVG: HTML에 직접 삽입해 HTTP 요청 감소.

예시:

<!-- 외부 파일 대신 -->
<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.

실무 적용 방법

디자인 툴 설정:
- Illustrator에서 "SVG 내보내기" 시 "최소화" 옵션 체크.
- Figma에서 "SVG 코드 복사" 후 불필요한 속성 제거.
개발 워크플로우:
- 빌드 과정에 SVGO 통합(예: Webpack 플러그인 svgo-loader).
- CSS 스프라이트 대신 <symbol>과 <use>로 아이콘 관리.
성능 테스트:
- 브라우저 개발자 도구로 렌더링 시간 확인.
- Lighthouse로 페이지 로드 성능 점검.

최적화 전후 비교

<!-- Before (1.2KB) -->
<?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>

<!-- After (0.2KB) -->
<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는 빠른 로딩과 부드러운 인터랙션을 보장하며, 특히 모바일 환경에서 그 가치를 발휘합니다.

6.3 KiB Raw Blame History