Jak wstawić SVG do dokumentu HTML?

Istnieje kilka sposobów wstawiania SVG do HTML:

• SVG w linii: Bezpośrednie wstawienie kodu SVG do HTML za pomocą tagu <svg>.
• Tag <img>: Użycie tagu <img> z atrybutem src, wskazującym na plik SVG.
• Tag <object>: Wstawianie SVG za pomocą tagu <object>.
• Tag <embed>: Wstawianie SVG za pomocą tagu <embed>.
• CSS: Użycie SVG jako obrazu tła przez CSS.
• <iframe>: Wstawianie strony HTML z SVG za pomocą <iframe>.

Każda metoda ma swoje cechy i zalety:

Metoda	Zalety	Wady	Zastosowanie
Inline SVG	Pełna kontrola, interaktywność JS/CSS	Powiększa rozmiar HTML, złożoność cache	Małe i często zmieniające się SVG, ikony
<img>	Prostota, cache	Ograniczona kontrola, brak interaktywności JS	Statyczne obrazy
<object>	Semantyka (obiekt zewnętrzny), interaktywność JS	Trochę bardziej skomplikowane niż <img>, wsparcie przeglądarek	Złożone SVG, zawartość zastępcza
<embed>	Prostsze niż <object>, wsparcie starych wtyczek	Niezalecane w HTML5	Kompatybilność ze starym kodem
CSS Background	Elastyczne pozycjonowanie, brak dodatkowych tagów w HTML	Brak interaktywności JS, ograniczona kontrola	Elementy dekoracyjne, wzory
<iframe>	Pełna izolacja, ładowanie osobnej strony	Narzut, trudności w interakcji	Wstawianie złożonych, niezależnych elementów

Przykład SVG w linii:

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

Przykład użycia tagu <img>:

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

Przykład użycia tagu <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Zawartość zastępcza -->
  <img src="image.png" alt="Alternatywny obraz">
</object>

Przykład użycia CSS:

.element {
  background-image: url('image.svg'); /* Użycie SVG jako tła */
  background-size: cover; /* Przykład stylizacji */
}