<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> SVG-Element ermöglicht das Einbinden von Bildern 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 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 <use> mit einer externen URL. Um SVG-Dateien einzubinden und Skripte in ihnen auszuführen, versuchen Sie <object> innerhalb von <foreignObject>.

Hinweis: Die HTML-Spezifikation definiert <image> als Synonym für <img> beim Parsen von HTML. Dieses spezielle 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 ausgehend vom Ursprung. Wertetyp: <length> | <percentage>; Standardwert: 0; Animierbar: ja

y

Positioniert das Bild vertikal ausgehend 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: none; 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 CORS-Anfrage-Credentials-Flags. Wertetyp: [ anonymous | use-credentials ]?; Standardwert: Keine; Animierbar: ja

decoding

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

fetchpriority

Gibt einen Hinweis auf die relative Priorität beim Abrufen eines externen Bildes. Erlaubte 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

Setzt keine Präferenz für die Abrufpriorität. 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 Rendern 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