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

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

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

使用場所

属性

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

画像の拡大縮小方法を制御します。値の型: (none |xMinYMin |xMidYMin |xMaxYMin |xMinYMid |xMidYMid |xMaxYMid |xMinYMax |xMidYMax |xMaxYMax) (meet |slice)?;既定値:xMidYMid meet;アニメーション:可

crossorigin

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

decoding

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

fetchpriorityExperimental非標準

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

high

この外部画像を他の外部リソースと比較して、高い優先度で取得します。

low

この外部画像を他の外部リソースと比較して、低い優先度で取得します。

auto

取得の優先度について、指定を行いません。これは値がない場合や不正な値が設定されたときに使用されます。これが既定値です。

xlink:href非推奨;

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

DOM インターフェイス

この要素はSVGImageElement インターフェイスを実装しています。

例

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

SVG

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

結果

仕様書

ブラウザーの互換性

関連情報

• fetchpriority 属性