svg 이미지 컨트롤 방법

SVG 파일을 웹페이지에서 불러오는 방법은 여러 가지가 있으며, 상황에 따라 적절한 방법을 선택하면 됩니다.

---

1. <img src="image.svg"> (일반적인 이미지처럼 사용)

<img src="image.svg" alt="SVG Image" width="100">

✅ 장점

• 사용이 간단하고 HTML에서 바로 적용 가능
• 브라우저 캐시를 활용할 수 있어 성능 최적화 가능

❌ 단점

• fill, stroke 등의 스타일을 변경할 수 없음
• JavaScript로 개별 요소를 조작할 수 없음

✅ 언제 사용할까?

• SVG를 단순한 정적 이미지처럼 사용할 때

---

2. <svg> 태그를 직접 삽입 (인라인 SVG)

<svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

✅ 장점

• CSS 및 JavaScript로 스타일 조작 가능
• fill="currentColor" 등을 이용해 동적 스타일 적용 가능

❌ 단점

• HTML 코드가 길어질 수 있음
• 브라우저 캐시를 활용할 수 없음

✅ 언제 사용할까?

• 색상, 크기, 애니메이션을 동적으로 변경해야 할 때

---

3. <object> 태그 사용

<object type="image/svg+xml" data="image.svg" width="100"></object>

✅ 장점

• SVG 내부 요소에 접근 가능 (<img>보다 유연함)
• 외부 파일이므로 HTML이 깔끔함

❌ 단점

• 일부 브라우저(특히 IE)에서 호환성이 떨어질 수 있음

✅ 언제 사용할까?

• 외부 SVG 파일을 사용하면서도 내부 요소를 조작해야 할 때

---

4. <iframe> 태그 사용

<iframe src="image.svg" width="100" height="100"></iframe>

✅ 장점

• SVG 파일을 독립적으로 불러오므로 충돌 가능성이 적음

❌ 단점

• <img>처럼 캐시 활용 가능하지만, <object>처럼 직접 스타일 조작이 어려움

✅ 언제 사용할까?

• SVG를 독립적인 문서처럼 불러와야 할 때

---

💡 결론: 언제 어떤 방법을 사용해야 할까?

사용 방법	장점	단점	사용 추천 상황
<img>	간단하고 빠름, 브라우저 캐시 가능	스타일 조작 불가	정적 이미지로 사용할 때
<svg> (인라인)	CSS 및 JS 조작 가능, 유연함	HTML이 길어짐, 캐시 활용 불가	색상, 애니메이션, 인터랙션이 필요할 때
<object>	외부 파일 관리, 내부 조작 가능	일부 브라우저 호환성 문제	외부 파일로 관리하면서도 스타일 변경해야 할 때
<iframe>	독립적 문서로 로드	스타일 조작 어려움	SVG 문서를 별도로 띄워야 할 때

👉 정적 SVG 이미지라면 <img> 사용, 스타일 변경이 필요하면 <svg> 인라인 삽입이 가장 좋은 방법입니다! 🚀