Wie kann man SVG in ein HTML-Dokument einfügen?

Es gibt mehrere Möglichkeiten, SVG in HTML einzufügen:

• Inline SVG: Direkte Einfügung des SVG-Codes in HTML mit dem <svg>-Tag.
• <img>-Tag: Verwendung des <img>-Tags mit src, das auf die SVG-Datei zeigt.
• <object>-Tag: Einfügen von SVG mittels <object>-Tag.
• <embed>-Tag: Einfügen von SVG mittels <embed>-Tag.
• CSS: Verwendung von SVG als Hintergrundbild über CSS.
• <iframe>: Einfügen einer HTML-Seite mit SVG mittels <iframe>.

Jede Methode hat ihre Eigenschaften und Vorteile:

Methode	Vorteile	Nachteile	Verwendung
Inline SVG	Volle Kontrolle, Interaktivität JS/CSS	Erhöht die HTML-Größe, Komplexität beim Caching	Kleine und häufig wechselnde SVGs, Icons
<img>	Einfachheit, Caching	Eingeschränkte Kontrolle, keine JS-Interaktivität	Statische Bilder
<object>	Semantik (externes Objekt), JS-Interaktivität	Etwas komplexer als <img>, Browser-Unterstützung	Komplexe SVGs, Fallback-Inhalte
<embed>	Einfacher als <object>, Unterstützung alter Plugins	Nicht empfohlen in HTML5	Kompatibilität mit Alt-Code
CSS Background	Flexibles Positionieren, keine zusätzlichen Tags im HTML	Keine JS-Interaktivität, begrenzte Kontrolle	Dekorative Elemente, Muster
<iframe>	Vollständige Isolation, Laden einer separaten Seite	Overhead, Interaktionsschwierigkeiten	Einfügen komplexer, unabhängiger Elemente

Beispiel für Inline SVG:

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

Beispiel für <img>:

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

Beispiel für <object>:

<object data="image.svg" type="image/svg+xml">
  <!-- Fallback-Inhalt -->
  <img src="image.png" alt="Alternatives Bild">
</object>

Beispiel für CSS:

.element {
  background-image: url('image.svg'); /* SVG als Hintergrund */
  background-size: cover; /* Beispiel für Styling */
}