<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.
Das <image>
SVG-Element bindet 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-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>
unter Verwendung 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 Parsen von HTML. Dieses spezifische Element und sein Verhalten gelten nur innerhalb von SVG-Dokumenten oder eingebetteten SVGs.
Verwendungskontext
Kategorien | Grafikelement, Grafikreferenzierende Elemente |
---|---|
Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente |
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
undxlink:href
Veraltet : Verweist auf eine URL für die Bilddatei.preserveAspectRatio
: Bestimmt, wie das Bild skaliert wird.crossorigin
: Definiert den Wert des Credentials-Flags für CORS-Anfragen.decoding
: Gibt einen Hinweis an den Browser, ob die Bilddecodierung synchron oder asynchron erfolgen soll.
DOM-Interface
<image>
implementiert das SVGImageElement
-Interface.
Beispiel
Grundlegende Darstellung eines PNG-Bildes in SVG:
SVG
<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