<image>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

DOM インターフェイス

<image>SVGImageElement インターフェイスを実装しています。

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

SVG

html
<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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
image
crossorigin
decoding
height
href
preserveAspectRatio
systemLanguage
width
x
xlink:href
Deprecated
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.