<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 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 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 es mit <use>
mit einer externen URL. Um SVG-Dateien einzubinden und Skripte darin auszuführen, versuchen Sie es mit <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
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. Wertetyp: <length>|<percentage> ; Standardwert:
0
; Animierbar: ja y
-
Positioniert das Bild vertikal 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: keiner; 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 Credentials-Flags für CORS-Anfragen. Wertetyp: [ anonymous | use-credentials ]? ; Standardwert: None; Animierbar: ja
decoding
-
Gibt dem Browser einen Hinweis, ob das Bild synchron oder asynchron decodiert werden soll. Wertetyp:
async | sync | auto
; Standardwert:auto
; Animierbar: ja xlink:href
Veraltet-
Zeigt auf eine URL für die Bilddatei. Wertetyp: <URL> ; Standardwert: keiner; Animierbar: nein
DOM-Schnittstelle
Dieses Element implementiert die SVGImageElement
-Schnittstelle.
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
image | ||||||||||||
crossorigin | ||||||||||||
decoding | ||||||||||||
height | ||||||||||||
href | ||||||||||||
preserveAspectRatio | ||||||||||||
systemLanguage | ||||||||||||
width | ||||||||||||
x | ||||||||||||
xlink:href | ||||||||||||
y |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Deprecated. Not for use in new websites.