웹페이지 svg 로드 방법 비교

SVG (Scalable Vector Graphics)는 벡터 기반의 이미지 포맷으로, 크기나 해상도에 관계없이 고해상도의 품질을 유지할 수 있습니다. 이번 글에서는 웹페이지에서 SVG를 활용하는 다양한 방법을 소개하고, 각 방법의 특징과 장단점, 그리고 각 방식에 적합한 사용 사례를 살펴보겠습니다.

1. HTML <svg> 삽입

HTML 문서 내에 직접 SVG 코드를 삽입하는 방식입니다.

<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="nonzero" />
  Sorry, your browser does not support inline SVG.
</svg>

장점

• SVG가 HTML 내부에 포함되므로 네트워크 요청 없이 빠르게 렌더링됩니다.
• CSS와 JavaScript를 사용해 SVG 요소를 스타일링하거나 조작할 수 있습니다.
• SVG Fragment을 통해 특정 요소를 직접 참조할 수 있습니다 (ex. #id).
  * SVG Fragment란?
  SVG 파일 내 특정 요소를 참조하기 위해 사용하는 URL의 일부분으로, SVG 내부의 특정 ID를 기반으로 요소를 지정할 수 있는 기능입니다. HTML 문서에서 앵커 태그(id)를 사용해 특정 섹션으로 바로 이동하는 방식과 유사
  

단점

• SVG 코드가 HTML 문서에 포함되므로 파일 크기가 커질 수 있습니다.
• SVG가 복잡할 경우 브라우저 메모리 사용량과 렌더링 비용이 증가할 수 있습니다.

---

2. <img>로 외부 리소스 연결

<img> 태그를 사용해 외부 SVG 파일을 연결하는 방식입니다.

<img src="https://www.example.com/icon.svg" />

장점

• 브라우저 캐싱을 활용하여 네트워크 요청을 줄일 수 있습니다.
• SVG가 외부 파일로 분리되므로 HTML 문서가 간결해집니다.
• SVG Fragment를 통해 외부 파일 내 특정 요소를 참조할 수 있습니다 (ex. https://www.example.com/icon.svg#id).

단점

• 네트워크 요청이 필요하므로, 파일 로드에 시간이 걸릴 수 있습니다.
• CSS로 스타일링하거나 JavaScript로 DOM에 접근할 수 없습니다.

---

3. <img>로 Data URI 연결

SVG 데이터를 Base64로 인코딩하여 <img> 태그의 src 속성에 직접 삽입하는 방식입니다.

<img src="data:image/svg+xml;base64,PHN2ZyB4b..." />

장점

• 데이터가 HTML에 포함되므로 네트워크 요청이 필요 없습니다.
• 외부 리소스를 요청하지 않으므로 로드 시간이 단축될 수 있습니다.

단점

• Base64 인코딩으로 데이터 크기가 커질 수 있습니다.
• CSS로 스타일링하거나 JavaScript로 DOM에 접근할 수 없습니다.
• SVG Fragment 사용 불가능

---

세 가지 방법 비교

기준	HTML <svg> 삽입	<img> 외부 리소스	<img> Data URI
외부 리소스 의존성	없음	있음	없음
네트워크 요청	없음	있음	없음
CSS 스타일링 적용	가능	불가능	불가능
SVG Fragment 사용	가능	가능	불가능
DOM 접근	가능	불가능	불가능
캐싱	없음	가능	없음
렌더링 성능	빠름	네트워크 의존	빠름
메모리 사용량	높음	낮음	높음

---

적합한 사용 사례

HTML <svg> 삽입이 적합한 경우

• 네트워크 요청을 최소화해야 하는 상황
• CSS 스타일링 또는 JavaScript를 활용한 애니메이션이나 인터랙션이 필요한 경우
• SVG가 비교적 간단하거나 한 번만 사용되는 경우

<img> 외부 리소스 연결이 적합한 경우

• SVG 파일을 여러 곳에서 재사용해야 하는 상황
• 브라우저 캐싱을 활용하여 성능을 최적화하고 싶은 경우

<img> Data URI 연결이 적합한 경우

• 네트워크 요청 없이 이미지를 즉시 렌더링해야 하는 상황
• SVG 파일이 단순하고 크기가 작은 경우