Ako vložiť SVG do dokumentu HTML?

Existuje niekoľko spôsobov, ako vložiť SVG do HTML:

• Inline SVG: Priamy vklad SVG kódu pomocou tagu <svg>.
• Tag <img>: Použitie tagu <img> s atribútom src, ktorý odkazuje na SVG súbor.
• Tag <object>: Vloženie SVG pomocou tagu <object>.
• Tag <embed>: Vloženie SVG pomocou tagu <embed>.
• CSS: Použitie SVG ako pozadia cez CSS.
• <iframe>: Vloženie HTML stránky so SVG pomocou <iframe>.

Každá metóda má svoje vlastnosti a výhody:

Metóda	Výhody	Nevýhody	Použitie
Inline SVG	Kompletná kontrola, interaktivita s JS/CSS	Zvýšenie veľkosti HTML, zložitosť cacheovania	Malé a často menené SVG, ikony
<img>	Jednoduchosť, cacheovanie	Obmedzená kontrola, žiadna interaktivita s JS	Statické obrázky
<object>	Semantika (vonkajší objekt), interaktivita s JS	Trochu zložitejšie ako <img>, podpora v prehliadačoch	Komplexné SVG, fallback obsah
<embed>	Jednoduchšie ako <object>, podpora starších pluginov	Neodporúča sa v HTML5	Kompatibilita so starým kódom
CSS Background	Flexibilné umiestnenie, bez ďalších tagov v HTML	Žiadna interaktivita s JS, obmedzená kontrola	Dekoratívne prvky, vzory
<iframe>	Plná izolácia, načítanie samostatnej stránky	Náklady navyše, ťažkosti s interakciou	Vloženie zložitých, nezávislých prvkov

Príklad Inline SVG:

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

Príklad použitia tagu <img>:

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

Príklad použitia tagu <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Náhradný obsah -->
  <img src="image.png" alt="Alternatívny obrázok">
</object>

Príklad použitia CSS:

.element {
  background-image: url('image.svg'); /* Použitie SVG ako pozadia */
  background-size: cover; /* Príklad štýlovania */
}