<image>
Baseline 廣泛可用 *
<image> SVG 元素用於在 SVG 文件中包含影像。它可以顯示 柵格影像 檔案或其他 SVG 檔案。
SVG 軟體必須支援的唯一影像格式是 JPEG、PNG 和其他 SVG 檔案。動畫 GIF 的行為未定義。
使用 <image> 顯示的 SVG 檔案會被 視為影像：外部資源不會被載入，:visited 樣式 不會被應用，並且它們不可互動。要包含動態 SVG 元素，請嘗試使用外部 URL 的 <use>。要包含 SVG 檔案並在其中執行指令碼，請嘗試在 <foreignObject> 中使用 <object>。
注意： HTML 規範將 <image> 定義為 HTML 解析過程中的 <img> 的同義詞。這個特定的元素及其行為僅適用於 SVG 文件或內聯 SVG 內部。
使用語境
| 分類 | 圖形元素，圖形引用元素，可渲染元素 |
|---|---|
| 允許內容 | 可包含任意數量、任意順序的下列元素 動畫元素 描述性元素 <animate>, <animateMotion>, <animateTransform>, <discard>, <script>, <set>, <style> |
屬性
x-
從原點開始水平定點陣圖像。值型別：<length> | <percentage>；預設值：
0；可動畫：是 y-
從原點開始垂直定點陣圖像。值型別：<length> | <percentage>；預設值：
0；可動畫：是 width-
影像渲染的寬度。與 HTML 的
<img>不同，此屬性是必需的。值型別：<length> | <percentage>；預設值：auto；可動畫：是 height-
影像渲染的高度。與 HTML 的
<img>不同，此屬性是必需的。值型別：<length> | <percentage>；預設值：auto；可動畫：是 href-
指向影像檔案的 URL。值型別：<URL>；預設值：無；可動畫：否
保持長寬比-
控制影像的縮放方式。值型別：(
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)？；預設值：xMidYMid meet；可動畫：是 crossorigin-
定義 CORS 請求的憑據標誌的值。值型別：[
anonymous|use-credentials]？；預設值：無；可動畫：是 decoding-
為瀏覽器提供有關應同步還是非同步執行影像解碼的提示。值型別：
async | sync | auto；預設值：auto；可動畫：是 fetchpriority實驗性 非標準-
提供一個提示，用於指示在獲取外部影像時應使用的相對優先順序。允許的值
xlink:href已廢棄-
指向影像檔案的 URL。值型別：<URL>；預設值：無；可動畫：否
DOM 介面
此元素實現了 SVGImageElement 介面。
示例
SVG 中 PNG 影像的基本渲染
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>
結果
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # ImageElement |
瀏覽器相容性
載入中…