언제 inline SVG를 쓰고 언제 img를 써야 하나요?

Question

Accepted Answer

SVG는 **벡터** 이미지 포맷(XML 기반)이므로 흐려지지 않고 어떤 크기로든 확대됩니다. 주로 두 가지 방식으로 포함할 수 있으며, 각각 장단점이 있습니다. ## Inline SVG — HTML에 직접 마크업 ```html ``` **장점:** 실제 DOM이기 때문에 CSS로 스타일링하고(`fill`, `stroke`), 부분을 애니메이션하며, `currentColor`로 색상을 바꾸고(텍스트 색상을 상속), 이벤트에 반응할 수 있습니다. 추가 HTTP 요청이 없습니다. **단점:** HTML을 비대하게 만들고, 별도로 캐시되지 않으며, 반복되는 아이콘은 마크업을 중복시킵니다. ## ``를 통한 SVG — 파일로 참조 ```html

``` **장점:** 브라우저가 캐시하고, HTML이 깔끔하게 유지되며, 간단합니다. **단점:** 여러분의 CSS/JS로 내부를 스타일링하거나 스크립팅할 수 **없습니다**. 불투명한 이미지입니다. ## 결정 가이드 ```text SVG를 다시 칠하거나/애니메이션하거나/상호작용해야 함 → inline SVG 정적 로고/일러스트, 캐싱 + 깔끔한 HTML을 원함 →

많이 반복되는 아이콘 → SVG sprite () 또는 아이콘 컴포넌트 ``` ## Accessibility ```html ``` ## 왜 중요한가 inline vs `` SVG를 선택하는 것은 그래픽을 **스타일링/애니메이션**해야 하는지(inline), 아니면 효율적으로 **표시**만 하면 되는지(``)로 귀결됩니다. hover나 테마에서 색상이 바뀌는 아이콘은 inline으로(흔히 컴포넌트로), 정적 브랜드 자산은 ``를 통해 처리하십시오. 어느 쪽이든 벡터는 모든 해상도에서 선명하게 유지되어 아이콘과 로고에 이상적입니다.

Inline SVG — HTML에 직접 마크업

<img>를 통한 SVG — 파일로 참조

결정 가이드

Accessibility

왜 중요한가

`<img>`를 통한 SVG — 파일로 참조