SVG는 벡터 이미지 포맷(XML 기반)이므로 흐려지지 않고 어떤 크기로든 확대됩니다. 주로 두 가지 방식으로 포함할 수 있으며, 각각 장단점이 있습니다.
Inline SVG — HTML에 직접 마크업
html
<svg width="24" height= = = =>
장점: 실제 DOM이기 때문에 CSS로 스타일링하고(fill, stroke), 부분을 애니메이션하며, currentColor로 색상을 바꾸고(텍스트 색상을 상속), 이벤트에 반응할 수 있습니다. 추가 HTTP 요청이 없습니다.
단점: HTML을 비대하게 만들고, 별도로 캐시되지 않으며, 반복되는 아이콘은 마크업을 중복시킵니다.
<img>를 통한 SVG — 파일로 참조<img src="logo.svg" alt="Company logo" width="120" />
장점: 브라우저가 캐시하고, HTML이 깔끔하게 유지되며, 간단합니다. 단점: 여러분의 CSS/JS로 내부를 스타일링하거나 스크립팅할 수 없습니다. 불투명한 이미지입니다.
SVG를 다시 칠하거나/애니메이션하거나/상호작용해야 함 → inline SVG
정적 로고/일러스트, 캐싱 + 깔끔한 HTML을 원함 → <img src=".svg">
많이 반복되는 아이콘 → SVG sprite (<use>) 또는 아이콘 컴포넌트
<svg role="img" aria-label="Settings">...</svg> <!-- 의미 있는 아이콘 -->
<svg aria-hidden="true">...</svg> <!-- 장식용: 보조 기술에서 숨김 -->
inline vs <img> SVG를 선택하는 것은 그래픽을 스타일링/애니메이션해야 하는지(inline), 아니면 효율적으로 표시만 하면 되는지(<img>)로 귀결됩니다.
hover나 테마에서 색상이 바뀌는 아이콘은 inline으로(흔히 컴포넌트로), 정적 브랜드 자산은 <img>를 통해 처리하십시오.
어느 쪽이든 벡터는 모든 해상도에서 선명하게 유지되어 아이콘과 로고에 이상적입니다.