<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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
image
crossorigin
decoding
height
href
preserveAspectRatio
systemLanguage
width
x
xlink:href
Deprecated
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.