<image>

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

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

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

注: HTML 仕様書は、解釈時に <image> を <img> の別名として定義しています。この仕様書の要素とその動作は SVG 文書またはインライン SVG 内のみのものです。

使用場所

カテゴリー	グラフィック要素、グラフィック参照要素
許可されている内容	任意の数、任意の順序の以下の要素。アニメーション要素説明的要素

属性

グローバル属性

固有の属性

x: 原点から見た画像の水平位置です。
y: 原点から見た画像の垂直位置です。
width (en-US): 画像が描画される幅です。 HTML の <img> とは異なり、この属性は必須です。
height (en-US): 画像が描画される高さです。 HTML の <img> とは異なり、この属性は必須です。
href および xlink:href (en-US): 画像ファイルの URL を指します。
preserveAspectRatio (en-US): 画像の拡大縮小方法を制御します。

DOM インターフェイス

<image> は SVGImageElement (en-US) インターフェイスを実装しています。

例

SVG 内における PNG 画像の基本的な描画:

SVG

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

結果

仕様書

仕様書	状態	備考
Scalable Vector Graphics (SVG) 2 <image> の定義	勧告候補	`height` および `width` を省略可能とした
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <image> の定義	勧告	初回定義

ブラウザーの互換性

BCD tables only load in the browser