<image>

Baseline Widely available *

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

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

Das <image> SVG-Element enthält 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 undefiniert.

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 einzuschließen, versuchen Sie <use> mit einer externen URL. Um SVG-Dateien einzubinden und Skripte darin auszuführen, versuchen Sie <object> innerhalb von <foreignObject>.

Hinweis: Die HTML-Spezifikation definiert <image> als Synonym für <img> beim Parsieren von HTML. Dieses spezifische Element und sein Verhalten gelten nur innerhalb von SVG-Dokumenten oder Inline-SVGs.

Verwendungskontext

Kategorien	Grafikelement, Grafikreferenzierende Elemente, Renderbares Element
Erlaubter Inhalt	Beliebige 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

crossorigin

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

decoding

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

fetchpriority Experimentell Nicht standardisiert

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: Legt keine Präferenz für die Abrufpriorität fest. Wird verwendet, wenn kein Wert oder ein ungültiger Wert gesetzt ist. Dies ist der Standardwert.

xlink:href Veraltet

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

<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

fetchpriority Attribut

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden