Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The
は SVG の要素で、 SVG 文書内に画像を含めます。これはラスター画像ファイルや他の SVG ファイルを表示することができます。
SVG ソフトウェアが対応する必要がある画像形式は JPEG, PNG, および他の SVG ファイルです。アニメーション GIF の動作は未定義です。
で表示される SVG ファイルは画像として扱われます。外部リソースは読み込まれず、 :visited
のスタイルは適用されず、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、
を
の中で使用してください。
使用場所
属性
x
y
width
-
画像が描画される幅です。 HTML の
とは異なり、この属性は必須です。 値の型:| ; 既定値: auto
; アニメーション: 可 height
-
画像が描画される高さです。 HTML の
とは異なり、この属性は必須です。 値の型:| ; 既定値: auto
; アニメーション: 可 href
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
非推奨;
DOM インターフェイス
この要素は SVGImageElement
インターフェイスを実装しています。
例
SVG 内における PNG 画像の基本的な描画:
SVG
結果
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ImageElement |