<image>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* 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-
原点から見た画像の水平位置です。 値の型: <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; アニメーション: 可 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>
結果
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # ImageElement |
ブラウザーの互換性
Loading…