Kā ievietot SVG HTML dokumentā?

Ir daudz veidu, kā ievietot SVG HTML:

• Inline SVG: SVG koda tieša ievietošana, izmantojot <svg> tagu.
• <img> tags: Izmantojot <img> tagu ar src atribūtu, kas norāda uz SVG failu.
• <object> tags: SVG ievietošana ar <object> tagu.
• <embed> tags: SVG ievietošana ar <embed> tagu.
• CSS: SVG izmantošana kā fona attēlu ar CSS.
• <iframe>: HTML lapas ievietošana ar SVG, izmantojot <iframe>.

Katram metodam ir savas īpatnības un priekšrocības:

Metode	Priekšrocības	Trūkumi	Pielietojums
Inline SVG	Pilnīga kontrole, JS/CSS interaktivitāte	Palielina HTML izmēru, grūti kešot	Mazas un bieži mainīgas SVG, ikonas
<img>	Vienkāršība, kešošana	Ierobežota kontrole, nav JS interaktivitātes	Statiskas bildes
<object>	Semantika (ārējs objekts), JS interaktivitāte	Nedaudz sarežģītāka nekā <img>, pārlūkprogrammu atbalsts	Komplekss SVG, fallback saturs
<embed>	Vienkāršāk nekā <object>, atbalsts vecākiem spraudņiem	Neiesaka HTML5	Saderība ar veco kodu
CSS Background	Elastīga pozicionēšana, bez papildu tagiem HTML	Nav JS interaktivitātes, ierobežota kontrole	Dekoratīvi elementi, raksti
<iframe>	Pilnīga izolācija, atsevišķas lapas ielāde	Papildu izmaksas, grūtības ar mijiedarbību	Ievietošana sarežģītiem, neatkarīgiem elementiem

Inline SVG piemērs:

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

<img> tag piemērs:

<img src="image.svg" alt="SVG apraksts">

<object> tag piemērs:

<object data="image.svg" type="image/svg+xml">
  <!-- Rezerves saturs -->
  <img src="image.png" alt="Alternatīva attēls">
</object>

CSS piemērs:

.element {
  background-image: url('image.svg'); /* SVG kā fona attēls */
  background-size: cover; /* Stila piemērs */
}