<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 fügt Bilder in SVG-Dokumente ein. Es kann Rasterbild-Dateien oder andere SVG-Dateien anzeigen.
Die einzigen Bildformate, die von SVG-Software unterstützt werden müssen, 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> beim Parsen von HTML. 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: none; Animierbar: nein
preserveAspectRatio-
Steuert, wie das Bild skaliert wird. Wertetyp: (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?; Standardwert:xMidYMid meet; Animierbar: ja crossorigin-
Bestimmt den Wert der Berechtigungsflagge für CORS-Anfragen. Wertetyp: [
anonymous|use-credentials]?; Standardwert: Keine; Animierbar: ja decoding-
Gibt dem Browser einen Hinweis, ob die Bilddecodierung synchron oder asynchron durchgeführt werden soll. Wertetyp:
async | sync | auto; Standardwert:auto; Animierbar: ja fetchpriorityExperimentell Nicht standardisiert-
Gibt einen Hinweis auf die relative Priorität bei der Abrufung 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-
Setzt keine Präferenz für die Abrufpriorität. Wird verwendet, wenn kein Wert oder ein ungültiger Wert gesetzt ist. Dies ist der Standard.
xlink:hrefVeraltet-
Zeigt auf eine URL für die Bilddatei. Wertetyp: <URL>; Standardwert: none; 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
Siehe auch
fetchpriorityAttribut