Hogyan lehet SVG-t beszúrni egy HTML-dokumentumba?

Számos módja van az SVG beillesztésének HTML-be:

• Sorban belüli SVG: A <svg> tag használatával közvetlenül az SVG kód beillesztése a HTML-be.
• <img> tag: Az <img> tag használata az src attribútummal, amely az SVG fájlra mutat.
• <object> tag: SVG beillesztése az <object> tag segítségével.
• <embed> tag: SVG beillesztése az <embed> tag segítségével.
• CSS: Az SVG használata háttérképként CSS-en keresztül.
• <iframe>: HTML oldal beillesztése SVG-vel az <iframe> segítségével.

Minden módszernek megvannak a maga jellemzői és előnyei:

Módszer	Előnyök	Hátrányok	Alkalmazás
Inline SVG	Teljes kontroll, JS/CSS interaktivitás	Növeli a HTML méretét, cache-elési bonyodalmak	Kisebb és gyakran változó SVG-k, ikonok
<img>	Egyszerűség, cache	Korlátozott kontroll, nincs JS interaktivitás	Statikus képek
<object>	Szemantika (külső objektum), JS interaktivitás	Egy kicsit bonyolultabb, mint <img>, böngésző támogatás	Komplex SVG-k, fallback tartalom
<embed>	Egyszerűbb, mint <object>, régi plugin támogatás	Nem ajánlott HTML5-ben	Régi kód kompatibilitás
CSS Háttérkép	Rugalmas pozícionálás, nincs szükség extra tagekre az HTML-ben	Nincs JS interaktivitás, korlátozott kontroll	Díszítő elemek, mintázatok
<iframe>	Teljes izoláció, külön oldal betöltése	Többlet, interakciós problémák	Összetett, független elemek beszúrása

Példa inline SVG:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Példa <img> használatára:

<img src="image.svg" alt="SVG leírása">

Példa <object> használatára:

<object data="image.svg" type="image/svg+xml">
  <!-- Helyettesítő tartalom -->
  <img src="image.png" alt="Alternatív kép">
</object>

CSS példa:

.element {
  background-image: url('image.svg'); /* SVG háttérként való használata */
  background-size: cover; /* Stílus példája */
}