HTML에 SVG를 포함시키는 몇 가지 방법이 있으며, 가장 좋은 방법은 상호 작용, 응답 성 또는 간단한 디스플레이가 필요한지 여부와 같은 유스 케이스에 따라 다릅니다. 가장 일반적이고 효과적인 접근 방식은 다음과 같습니다.

1. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175364741525491.jpeg" class="lazy" alt="HTML에 SVG를 포함시키는 방법은 무엇입니까?" > 태그 사용

이것은 부모 문서에서 JavaScript 또는 CSS로 조작 할 필요가없는 경우 SVG를 포함시키는 가장 간단한 방법입니다.

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175364741525491.jpeg"  class="lazy"  src = "image.svg"alt = "description"width = "200"height = "200">

장점 :

• 사용하기 쉽습니다
• 정적 이미지에 좋습니다
• 캐싱은 잘 작동합니다

단점 :

• SVG 내부를 CSS로 스타일링 할 수 없습니다
• JavaScript로 SVG 내부의 요소를 조작 할 수 없습니다
• 제한된 접근성 옵션

svg가 로고 나 아이콘과 같은 그래픽 일 때 이것을 사용하십시오.

2. <svg> 요소가있는 인라인 svg

SVG 코드를 HTML에 직접 붙여 넣을 수 있습니다. 이것은 스타일링과 스크립팅을 완전히 제어 할 수 있습니다.

 <svg width = "200"height = "200"viewbox = "0 0 100 100"xmlns = "http://www.w3.org/2000/svg">
  <circle cx = "50"cy = "50"r = "40"fill = "blue" />
</svg>

장점 :

• CSS (내부 요소조차도)와 완전히 스타일링 가능합니다.
• JavaScript로 스크립트 할 수 있습니다
• 반응 형 디자인 친화적
• 액세스 가능 (ARIA 라벨, 타이틀 등을 추가 할 수 있음)

단점 :

• HTML 크기를 증가시킵니다
• 여러 페이지에서 사용되는 경우 브라우저 캐싱이 없습니다
• 자주 재사용되면 유지하기가 더 어렵습니다

excent는 대화율, 애니메이션 또는 동적 스타일이 필요할 때 이것을 사용하십시오.

3. <object> 태그 사용

이 방법은 상호 작용 및 스크립팅을 유지하면서 SVG를 외부 파일로 포함시킵니다.

 <개체 유형 = "image/svg xml"data = "image.svg"width = "200"height = "200">
  브라우저는 SVG를 지원하지 않습니다.
</객체>

장점 :

• SVG를 별도의 파일 (캐싱)으로 유지합니다.
• SVG 내부의 스크립팅 및 CSS를 지원합니다
• 폴백 콘텐츠 가능

단점 :

• 부모 페이지에서 약간 더 복잡한 스타일
• 도메인 간 문제가 발생할 수 있습니다

✅ 재사용 가능한 대화식 SVG (예 : 차트,지도)에 적합합니다.

4. <iframe> 또는 <embed> 사용 (덜 일반적)

이러한 작업이지만 특정 이유가 없으면 일반적으로 권장되지 않습니다.

 <embed src = "image.svg"type = "image/svg xml"width = "200"height = "200">

⚠️ <embed> 구식입니다. <object> 가 선호됩니다.

5. CSS 배경 사용 (장식 SVG 용)

SVG가 순전히 장식적인 경우 (배경 이미지와 같은) CSS를 사용하십시오.

 .요소 {
  배경 : URL ( 'image.svg') 비 반복 센터;
  너비 : 200px;
  높이 : 200px;
  배경 크기 : 포함;
}

장점 :

• 시각적 디자인 요소에 좋습니다
• HTML을 혼란스럽게하지 않습니다

단점 :

• 액세스 할 수 없습니다
• 스타일이나 스크립트를받을 수 없습니다
• 시맨틱이 아닙니다

∎ 필수 비 시각에 대해서만 사용하십시오.

보너스 : SVG를 반응하게 만듭니다

인라인 SVG를 사용할 때는 크게 확장하십시오.

 <svg viewbox = "0 0 100 100"preserveaspectratio = "xmidymid meet"style = "너비 : 100%; 높이 : 자동;">
  <!-SVG 컨텐츠->
</svg>

width 과 height 속성을 제거하거나 CSS로 설정하여 스케일링을 허용합니다.

빠른 의사 결정 가이드 :

• 상호 작용이나 애니메이션이 필요하십니까? → 인라인 SVG
• 아이콘/로고를 보여 주시겠습니까? → <img src="/static/imghw/default1.png" data-src="icon.svg" class="lazy" alt="HTML에 SVG를 포함시키는 방법은 무엇입니까?" >
• 재사용 가능하고 대화식? → <object data="chart.svg"></object>
• 순전히 장식? → CSS 배경

기본적으로 제어 대 단순성에 따라 선택하십시오. 인라인은 가장 힘을줍니다. <img alt="HTML에 SVG를 포함시키는 방법은 무엇입니까?" > 가장 번거 로움을줍니다.

위 내용은 HTML에 SVG를 포함시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!