<image>

使用場所

属性

x

原点から見た画像の水平位置です。 値の型: <length> | <percentage>; 既定値: 0; アニメーション: 可

y

原点から見た画像の垂直位置です。 値の型: <length> | <percentage>; 既定値: 0; アニメーション: 可

width

画像が描画される幅です。 HTML の <img> とは異なり、この属性は必須です。 値の型: <length> | <percentage>; 既定値: auto; アニメーション: 可

height

画像が描画される高さです。 HTML の <img> とは異なり、この属性は必須です。 値の型: <length> | <percentage>; 既定値: auto; アニメーション: 可

href

画像ファイルの URL を指します。 値の型: <URL>; 既定値: none; アニメーション: 不可

preserveAspectRatio

画像の拡大縮小方法を制御します。 値の型: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; 既定値: xMidYMid meet; アニメーション: 可

crossorigin

CORS リクエストの資格情報フラグの値を定義します。 値の型: [ anonymous | use-credentials ]?; 既定値: None; アニメーション: 可

decoding

画像を同期的にデコードするか非同期的にデコードするかをブラウザーに指示します。 値の型: async | sync | auto; 既定値: auto; アニメーション: 可

fetchpriority

Provides a hint of the relative priority to use when fetching an external image. Allowed values:

high

この外部画像を他の外部リソースと比較して、高い優先度で取得します。

low

この外部画像を他の外部リソースと比較して、低い優先度で取得します。

auto

取得の優先度について、指定を行いません。 これは値がない場合や不正な値が設定されたときに使用されます。 これが既定値です。

xlink:href

画像ファイルの URL を指定します。 値の型: <URL>; 既定値: none; アニメーション: 不可

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>

結果

仕様書

ブラウザーの互換性

関連情報

• fetchpriority 属性