<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 fügt 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 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 <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>, 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 aus.
  • y: Positioniert das Bild vertikal vom Ursprung aus.
  • width: Die Breite, in der das Bild gerendert wird. Im Gegensatz zu HTMLs <img> ist dieses Attribut erforderlich.
  • height: Die Höhe, in der das Bild gerendert wird. Im Gegensatz zu HTMLs <img> ist dieses Attribut erforderlich.
  • href und xlink:href : Zeigt auf eine URL für die Bilddatei.
  • preserveAspectRatio: Kontrolliert, wie das Bild skaliert wird.
  • crossorigin: Definiert den Wert des Credentials-Flags für CORS-Anfragen.
  • decoding: Gibt dem Browser einen Hinweis darauf, ob die Bilddekodierung synchron oder asynchron erfolgen soll.

DOM-Schnittstelle

<image> 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

BCD tables only load in the browser