<image>

Baseline Widely available *

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

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

Das <image>-Element SVG integriert Bilder in SVG-Dokumente. 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> 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 ein Synonym für <img>, wenn HTML geparst wird. Dieses spezielle Element und sein Verhalten gelten nur innerhalb von SVG-Dokumenten oder inline 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 aus. Wertetyp: <length> | <percentage>; Standardwert: 0; Animierbar: ja

y

Positioniert das Bild vertikal vom Ursprung aus. 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: none; Animierbar: nein

preserveAspectRatio

Steuert, 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 Credential-Flags für CORS-Anfragen. Wertetyp: [ anonymous | use-credentials ]?; Standardwert: None; Animierbar: ja

decoding

Gibt dem Browser einen Hinweis, ob die Bilddekodierung synchron oder asynchron durchgeführt werden soll. Wertetyp: async | sync | auto; Standardwert: auto; Animierbar: ja

fetchpriority

Gibt einen Hinweis auf die relative Priorität beim Abrufen eines externen Bildes. Zulässige Werte:

high

Ruft das externe Bild mit hoher Priorität im Vergleich zu anderen externen Ressourcen ab.

low

Ruft das externe Bild mit niedriger Priorität im Vergleich zu anderen externen Ressourcen ab.

auto

Legt keine Präferenz für die Abrufpriorität fest. Wird verwendet, wenn kein Wert oder ein ungültiger Wert festgelegt ist. Dies ist der Standard.

xlink:href

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

DOM-Schnittstelle

Dieses Element implementiert die SVGImageElement-Schnittstelle.

Beispiel

Grundlegendes Rendering 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

Siehe auch