svg 要素は、ルート要素でない場合、スタンドアローンな SVG の断片を現在のドキュメント（例えば HTML ドキュメント）の中にネストするために使われます。このスタンドアローンな断片は独自のビューポートと座標系を持ちます。
使用可能な場所
| カテゴリ | コンテナ要素 、 ストラクチャ要素 |
|---|---|
| 許可された内容 | 任意の数、任意の順で以下の要素を配置可能： アニメーション要素 説明的要素 図形要素 構造的要素 グラデーション要素 <a> 、 <altGlyphDef> 、 <clipPath> 、 <color-profile> 、 <cursor> 、 <filter> 、 <font> 、 <font-face> 、 <foreignObject> 、 <image> 、 <marker> 、 <mask> 、 <pattern> 、 <script> 、 <style> 、 <switch> 、 <text> 、 <view> |
例
次の SVG 画像を考えてみましょう（イタリアの国旗を表しています）:
<?xml version="1.0"?>
<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 インタフェースを提供します。
ブラウザ実装状況
| 機能 | 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 |