svg 要素は、現在のドキュメント（例えば HTML ドキュメント）の中に SVG の断片を埋め込むために使われます。この SVG 断片は独自のビューポートと座標系を持ちます。
使用可能な場所
| カテゴリー | コンテナー要素 、 構造的要素 |
|---|---|
| 許可された内容 | 任意の数、任意の順で以下の要素を配置可能： アニメーション要素 説明的要素 図形要素 構造的要素 グラデーション要素 <a> 、 <altGlyphDef> 、 <clipPath> 、 <color-profile> 、 <cursor> 、 <filter> 、 <font> 、 <font-face> 、 <foreignObject> 、 <image> 、 <marker> 、 <mask> 、 <pattern> 、 <script> 、 <style> 、 <switch> 、 <text> 、 <view> |
例
次の SVG 画像を考えてみましょう（イタリアの国旗を表しています）:
<svg xmlns="http://www.w3.org/2000/svg"
width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
これは次のように HTML5 文書に含めることができます:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML/SVG Example</title>
</head>
<body>
<svg width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
</body>
</html>
属性
グローバル属性
専用属性
DOM インターフェイス
この要素は SVGSVGElement インターフェイスを実装します。
仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 <svg> の定義 |
勧告候補 | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) <svg> の定義 |
勧告 | 初期の定義 |
ブラウザ実装状況
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 機能 | Chrome | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 3.0 | 1.0 (1.8) | 未サポート | (有) | 3.0.4 |