Jak vložit SVG do dokumentu HTML?

Existuje několik způsobů, jak vložit SVG do HTML:

• Inline SVG: Přímé vložení SVG kódu do HTML pomocí tagu <svg>.
• Tag <img>: Použití tagu <img> s atributem src, který odkazuje na SVG soubor.
• Tag <object>: Vložení SVG pomocí tagu <object>.
• Tag <embed>: Vložení SVG pomocí tagu <embed>.
• CSS: Použití SVG jako pozadí přes CSS.
• <iframe>: Vložení HTML stránky s SVG pomocí <iframe>.

Každá metoda má své vlastnosti a výhody:

Metoda	Výhody	Nevýhody	Použití
Inline SVG	Plná kontrola, interaktivita JS/CSS	Zvětšení velikosti HTML, složitost cache	Malé a často měnící se SVG, ikony
<img>	Jednoduchost, cache	Omezená kontrola, žádná JS interaktivita	Statické obrázky
<object>	Semantika (vnější objekt), JS interaktivita	O něco složitější než <img>, podpora prohlížečů	Složitější SVG, fallback obsah
<embed>	Jednodušší než <object>, podpora starších pluginů	Nedoporučuje se v HTML5	Kompatibilita se starým kódem
CSS Background	Flexibilní umístění, žádné další tagy v HTML	Žádná JS interaktivita, omezená kontrola	Dekorativní prvky, vzory
<iframe>	Kompletní izolace, načítání samostatné stránky	Přetížení, problémy s interakcí	Vložení složitých, nezávislých prvků

Příklad inline SVG:

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

Příklad použití tagu <img>:

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

Příklad použití tagu <object>:

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

Příklad použití CSS:

.element {
  background-image: url('image.svg'); /* Použití SVG jako pozadí */
  background-size: cover; /* Příklad stylování */
}