<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.

* Some parts of this feature may have varying levels of support.

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 GIFs ist nicht definiert.

SVG-Dateien, die mit <image> angezeigt werden, werden als 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> mit einer externen URL. Um SVG-Dateien einzubinden und Skripte darin auszuführen, versuchen Sie es mit <object> innerhalb von <foreignObject>.

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

Verwendungskontext

KategorienGrafikelement, Grafikreferenzierende Elemente, Renderbares Element
Erlaubter InhaltBeliebige Anzahl folgender Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente
<animate>, <animateMotion>, <animateTransform>, <discard>, <script>, <set>, <style>

Attribute

x

Positioniert das Bild horizontal vom Ursprung. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

y

Positioniert das Bild vertikal vom Ursprung. Wertetyp: <length>|<percentage> ; Standardwert: 0; Animierbar: ja

width

Die Breite, mit der das Bild gerendert wird. Im Gegensatz zu HTML's <img> ist dieses Attribut erforderlich. Wertetyp: <length>|<percentage> ; Standardwert: auto; Animierbar: ja

height

Die Höhe, mit der das Bild gerendert wird. Im Gegensatz zu HTML's <img> ist dieses Attribut erforderlich. Wertetyp: <length>|<percentage> ; Standardwert: auto; Animierbar: ja

href

Zeigt auf eine URL für die Bilddatei. Wertetyp: <URL> ; Standardwert: keiner; Animierbar: nein

preserveAspectRatio

Bestimmt, wie das Bild skaliert wird. Wertetyp: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Standardwert: xMidYMid meet; Animierbar: ja

crossorigin

Definiert den Wert des Credentials-Flags für CORS-Anfragen. Wertetyp: [ anonymous | use-credentials ]? ; Standardwert: None; Animierbar: ja

decoding

Gibt dem Browser einen Hinweis, ob das Bild synchron oder asynchron decodiert werden soll. Wertetyp: async | sync | auto ; Standardwert: auto; Animierbar: ja

xlink:href Veraltet

Zeigt auf eine URL für die Bilddatei. Wertetyp: <URL> ; Standardwert: keiner; Animierbar: nein

DOM-Schnittstelle

Dieses Element implementiert die SVGImageElement-Schnittstelle.

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