The <image>
は SVG の要素で、 SVG 文書内に画像を含めます。これはラスター画像ファイルや他の SVG ファイルを表示することができます。
SVG ソフトウェアが対応する必要がある画像形式は JPEG, PNG, および他の SVG ファイルです。アニメーション GIF の動作は未定義です。
<image>
で表示される SVG ファイルは画像として扱われます。外部リソースは読み込まれず、 :visited
のスタイルは適用されず、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 <use>
を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、 <object>
を <foreignObject>
の中で使用してください。
使用場所
属性
グローバル属性
固有の属性
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> の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。