Kaip įterpti SVG į HTML dokumentą?

Yra keletas būdų įterpti SVG į HTML:

• Inline SVG: SVG kodo įterpimas tiesiogiai naudojant <svg> žymą.
• <img> žymė: Naudojant <img> žymę su src atributu, nurodančiu SVG failą.
• <object> žymė: SVG įterpimas naudojant <object> žymą.
• <embed> žymė: SVG įterpimas naudojant <embed> žymą.
• CSS: SVG naudojimas kaip fono paveikslėlis per CSS.
• <iframe>: HTML puslapio įterpimas su SVG naudojant <iframe>.

Kiekvienas metodas turi savo ypatybes ir privalumus:

Metodas	Privalumai	Trūkumai	Pritaikymas
Inline SVG	Pilnas valdymas, interaktyvumas su JS/CSS	Padidina HTML dydį, sudėtinga talpykla	Maži ir dažnai keičiasi SVG, piktogramos
<img>	Paprastumas, talpykla	Ribotas valdymas, nėra interaktyvumo su JS	Statiniai vaizdai
<object>	Semantika (išorinis objektas), interaktyvumas su JS	Šiek tiek sudėtingiau nei <img>, naršyklės palaikymas	Sudėtingi SVG, fallback turinys
<embed>	Paprasčiau nei <object>, palaikymas senesniems papildiniams	Nerekomenduojama HTML5	Suderinamumas su sena kodu
CSS Background	Lankstus pozicionavimas, be papildomų žymių HTML	Nėra interaktyvumo su JS, ribotas valdymas	Dekoratyviniai elementai, raštai
<iframe>	Visapusiška izoliacija, įkeliama atskira puslapis	Papildomi išlaidos, sudėtingas sąveika	Sudėtingų, nepriklausomų elementų įterpimas

Inline SVG pavyzdys:

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

<img> žymės pavyzdys:

<img src="image.svg" alt="SVG aprašymas">

<object> žymės pavyzdys:

<object data="image.svg" type="image/svg+xml">
  <!-- Atsarginis turinys -->
  <img src="image.png" alt="Alternatyvus vaizdas">
</object>

CSS naudojimo pavyzdys:

.element {
  background-image: url('image.svg'); /* SVG kaip fono vaizdas */
  background-size: cover; /* Stiliaus pavyzdys */
}