<image>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <image> SVG-Element bindet Bilder in SVG-Dokumente ein. Es kann Rasterbild-Dateien oder andere SVG-Dateien anzeigen.

Die einzigen Bildformate, die SVG-Software unterstützen muss, sind JPEG, PNG und andere SVG-Dateien. Das Verhalten von animierten GIF-Dateien ist nicht definiert.

SVG-Dateien, die mit <image> angezeigt werden, werden wie ein Bild behandelt: Externe Ressourcen werden nicht geladen, :visited-Stile werden nicht angewendet und sie können nicht interaktiv sein. Um dynamische SVG-Elemente einzubinden, versuchen Sie es mit <use> unter Verwendung einer externen URL. Um SVG-Dateien einzubinden und Skripte darin auszuführen, versuchen Sie <object> innerhalb von <foreignObject>.

Hinweis: Die HTML-Spezifikation definiert <image> als Synonym für <img> beim Parsen von HTML. Dieses spezifische Element und sein Verhalten gelten nur innerhalb von SVG-Dokumenten oder eingebetteten SVGs.

Verwendungskontext

KategorienGrafikelement, Grafikreferenzierende Elemente
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente

Attribute

  • x: Positioniert das Bild horizontal vom Ursprung aus.
  • y: Positioniert das Bild vertikal vom Ursprung aus.
  • width: Die Breite, in der das Bild gerendert wird. Im Gegensatz zu HTMLs <img> ist dieses Attribut erforderlich.
  • height: Die Höhe, in der das Bild gerendert wird. Im Gegensatz zu HTMLs <img> ist dieses Attribut erforderlich.
  • href und xlink:href : Verweist auf eine URL für die Bilddatei.
  • preserveAspectRatio: Bestimmt, wie das Bild skaliert wird.
  • crossorigin: Definiert den Wert des Credentials-Flags für CORS-Anfragen.
  • decoding: Gibt einen Hinweis an den Browser, ob die Bilddecodierung synchron oder asynchron erfolgen soll.

DOM-Interface

<image> implementiert das SVGImageElement-Interface.

Beispiel

Grundlegende Darstellung eines PNG-Bildes in SVG:

SVG

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>

Ergebnis

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# ImageElement

Browser-Kompatibilität

BCD tables only load in the browser