<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: 画像が描画される幅です。 HTML の <img> とは異なり、この属性は必須です。
  • height: 画像が描画される高さです。 HTML の <img> とは異なり、この属性は必須です。
  • href および xlink:href: 画像ファイルの URL を指します。
  • preserveAspectRatio: 画像の拡大縮小方法を制御し案す。

DOM インターフェイス

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

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> の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
imageChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3.1WebView Android 完全対応 3Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0
heightChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
preserveAspectRatioChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
widthChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
非推奨
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
yChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。