<image>
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Das <image> SVG-Element schließt Bilder in SVG-Dokumenten 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 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 einzuschließen, versuchen Sie <use> mit einer externen URL. Um SVG-Dateien einzuschließen und Skripte darin auszuführen, versuchen Sie <object> innerhalb von <foreignObject>.
Hinweis:
Die HTML-Spezifikation definiert <image> als Synonym für <img>, während HTML geparst wird. 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>, <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, bei der das Bild gerendert wird. Anders als beim HTML-
<img>ist dieses Attribut erforderlich. Wertetyp: <length> | <percentage>; Standardwert:auto; Animierbar: ja height-
Die Höhe, bei der das Bild gerendert wird. Anders als beim HTML-
<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-
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-
Definiert den Wert des Berechtigungsflags für CORS-Anfragen. Wertetyp: [
anonymous|use-credentials]?; Standardwert: Keine; Animierbar: ja decoding-
Gibt dem Browser einen Hinweis darauf, ob die Bilddekodierung synchron oder asynchron durchgeführt werden soll. Wertetyp:
async | sync | auto; Standardwert:auto; Animierbar: ja fetchpriority-
Gibt einen Hinweis auf die relative Priorität, die beim Abrufen eines externen Bildes verwendet werden soll. 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. Es wird verwendet, wenn kein Wert oder ein ungültiger Wert gesetzt ist. Dies ist der Standard.
xlink:href-
Zeigt auf eine URL für die Bilddatei. Wertetyp: <URL>; Standardwert: keiner; Animierbar: nein
DOM-Schnittstelle
Dieses Element implementiert die SVGImageElement-Schnittstelle.
Beispiel
Grundlegende Anzeige 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
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # ImageElement |
Browser-Kompatibilität
Siehe auch
- Attribut
fetchpriority