0Pricing
HTML Academy · Lektion

Inline-SVG gegenüber img und object

Wählen Sie die passende Methode zum Einbetten von SVG für Ihren Anwendungsfall

Inline-SVG gegenüber img und object ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Drei Möglichkeiten, SVG einzubetten

SVG (Scalable Vector Graphics) kann auf drei Arten eingebettet werden:

  • <img src="icon.svg"> – einfach, gecacht, kein Zugriff auf JS/CSS
  • <object data="chart.svg"> – Interaktion innerhalb des SVG, separates Dokument
  • Inline-SVG innerhalb von HTML – vollständiger Zugriff auf CSS/JS, keine zusätzliche Anfrage

SVG mit img src

Die einfachste Methode: Referenzieren Sie SVG als Bild:

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

SVG als CSS background-image

Verwenden Sie SVG als CSS-Hintergrund für dekorative Symbole:

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

SVG mit dem object-Element

Binden Sie SVG mit <object> für interaktive SVGs ein:

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

Inline-SVG

Binden Sie SVG direkt in HTML ein, um vollständige Kontrolle zu erhalten:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Vorteile von Inline-SVG

Warum Inline-SVG verwenden:

  • Vollständige CSS-Formatierung: fill, stroke, Übergänge, Animationen
  • JavaScript-Interaktion: Wählen Sie SVG-Elemente aus und reagieren Sie auf Ereignisse
  • currentColor: Übernimmt die Farbe aus dem übergeordneten CSS
  • Keine zusätzliche HTTP-Anfrage
  • Kann mit role und title Bestandteil des Barrierefreiheitsbaums sein

Nachteile von Inline-SVG

Nachteile von Inline-SVG:

  • Die HTML-Datei wird größer
  • Wird vom Browser nicht separat gecacht
  • Dasselbe SVG lässt sich ohne Duplikation nicht einfach auf mehreren Seiten wiederverwenden
  • Code wird bei wiederholten Symbolen mehrfach benötigt

use-Element für Sprites

Definieren Sie SVG-Symbole einmal und referenzieren Sie sie mit <use>:

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

Barrierefreies SVG

Machen Sie Inline-SVGs barrierefrei:

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

currentColor-Trick

Verwenden Sie currentColor, um die Textfarbe aus CSS zu übernehmen:

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Kurze Prüfung

Was ist der wichtigste Vorteil von Inline-SVG gegenüber einem SVG mit img src?

Rückblick: SVG einbetten

Die wichtigsten Aspekte beim Einbetten von SVG:

  • <img src> – einfach; kein Zugriff auf CSS/JS; gecacht
  • CSS background-image – nur für dekorative Zwecke
  • <object data> – interaktives SVG; teilweise isoliert
  • Inline-SVG – vollständige Kontrolle über CSS/JS; keine zusätzliche Anfrage
  • SVG-Sprite mit <symbol> + <use> – effiziente Wiederverwendung

Häufig gestellte Fragen

Ist die Lektion „Inline-SVG gegenüber img und object“ kostenlos?

Ja — der vollständige Text von „Inline-SVG gegenüber img und object“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Inline-SVG gegenüber img und object“?

Wählen Sie die passende Methode zum Einbetten von SVG für Ihren Anwendungsfall Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Inline-SVG gegenüber img und object“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Inline-SVG gegenüber img und object
  2. Grundlegende SVG-Formen: rect circle path
  3. SVG viewBox und responsive Skalierung
  4. SVG mit CSS und SMIL animieren
← Zurück zu HTML Academy