<image>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

The <image> は SVG の要素で、 SVG 文書内に画像を含めます。これはラスター画像ファイルや他の SVG ファイルを表示することができます。

SVG ソフトウェアが対応する必要がある画像形式は JPEG, PNG, および他の SVG ファイルです。アニメーション GIF の動作は未定義です。

<image> で表示される SVG ファイルは画像として扱われます。外部リソースは読み込まれず、 :visited のスタイルは適用されず、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 <use> を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、 <object> を <foreignObject> の中で使用してください。

メモ: HTML 仕様書は、解釈時に <image> を <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; アニメーション: 不可

preserveAspectRatio

crossorigin

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

decoding

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

fetchpriority Experimental 非標準

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

high: この外部画像を他の外部リソースと比較して、高い優先度で取得します。
low: この外部画像を他の外部リソースと比較して、低い優先度で取得します。
auto: 取得の優先度について、指定を行いません。これは値がない場合や不正な値が設定されたときに使用されます。これが既定値です。

xlink:href 非推奨;

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

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>

結果

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # ImageElement

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年10月30日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content

<image>

使用場所

属性

DOM インターフェイス

例

SVG

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN