<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 beinhaltet Bilder innerhalb von SVG-Dokumenten. 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 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 einzuschließen und Skripte darin auszuführen, versuchen Sie es mit <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, 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. Werttyp: <length> | <percentage>; Standardwert: 0; Animierbar: ja

y

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

width

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

height

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

href

Zeigt auf eine URL der Bilddatei. Werttyp: <URL>; Standardwert: keiner; Animierbar: nein

preserveAspectRatio

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

crossorigin

Definiert den Wert der Berechtigungsnachweis-Flagge für CORS-Anfragen. Werttyp: [ anonymous | use-credentials ]?; Standardwert: Keine; Animierbar: ja

decoding

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

xlink:href

Zeigt auf eine URL der Bilddatei. Werttyp: <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