svg
===

`svg` 要素は、新しい座標系とビューポートを定義するコンテナです。これは SVG ドキュメントの最も外側の要素として使用されますが、SVG または HTML ドキュメントの中に SVG フラグメントを埋め込むためにも使用できます。

**メモ:** `xmlns` 属性は *SVG ドキュメント*の最も外側の `svg` 要素にのみ必要です。内部の `svg` 要素や HTML 文書の内部には不要です。

例
-
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg
 viewBox="0 0 300 100"
 xmlns="http://www.w3.org/2000/svg"
 stroke="red"
 fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>
```

属性
--

`baseProfile (en-US)` 
非推奨

 文書が要求する最小の SVG 言語プロファイル
 *値の型*: **<string>** ; *初期値*: none; *Animatable*: **no**

`contentScriptType` 
非推奨

 SVG フラグメントで用いられる初期記述言語
 *値の型*: **<string>** ; *初期値*: `application/ecmascript`; *アニメーション可否*: **no**

`contentStyleType` 
非推奨

 SVG フラグメントで用いられる初期のスタイルシート言語
 *値の型*: **<string>** ; *初期値*: `text/css`; *アニメーション可否*: **no**

`height (en-US)`

 矩形ビューポートで表示される高さ (それ自身の座標系の高さではありません)
 *値の型*: **<length>**|**<percentage>** ; *初期値*: `auto`; *アニメーション可否*: **yes**

`preserveAspectRatio (en-US)`

 異なるアスペクト比での表示時に、`svg`フラグメントがどう変形されるか
 *値の型*: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; *初期値*: `xMidYMid meet`; *アニメーション可否*: **yes**

`version (en-US)` 
非推奨

 要素内の内容にどのバージョンの SVG が用いられるか
 *値の型*: **<number>** ; *初期値*: none; *アニメーション可否*: **no**

`viewBox`

 The SVG viewport coordinates for the current SVG fragment.
 *値の型*: **<list-of-numbers>** ; *初期値*: none; *アニメーション可否*: **yes**

`width (en-US)`

 矩形ビューポートで表示される幅 (それ自身の座標系の幅ではありません)
 *値の型*: **<length>**|**<percentage>** ; *初期値*: `auto`; *アニメーション可否*: **yes**

`x`

 SVG コンテナが表示される x 座標。最も外側の`SVG`要素では効果ありません。
 *値の型*: **<length>**|**<percentage>** ; *初期値*: `0`; *アニメーション可否*: **yes**

`y`

 SVG コンテナが表示される y 座標。最も外側の`SVG`要素では効果ありません。
 *値の型*: **<length>**|**<percentage>** ; *初期値*: `0`; *Animatable*: **yes**



**メモ:** SVG2 で開始する場合には、`x`, `y`, `width`, `height` は、*ジオメトリプロパティ*です。これは、これらの属性が CSS プロパティとして用いられることを意味します。

### グローバル属性

コア属性

特に: `id`, `tabindex (en-US)`

スタイル属性
`class (en-US)`, `style (en-US)`
条件処理属性

特に: `requiredExtensions`, `systemLanguage (en-US)`

イベント属性

グローバルイベント属性, グラフィカルイベント属性, 文書イベント属性, 文書要素イベント属性

プレゼンテーション属性

特に: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

Aria 属性

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

使用上の注意
------

|  |  |
| --- | --- |
| カテゴリー | コンテナー要素、構造的要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>` (en-US)、`<filter>` (en-US)、`<font>` (en-US)、`<font-face>` (en-US)、`<foreignObject>`、`<image>`、`<marker>` (en-US)、`<mask>`、`<pattern>`、`<script>`、`<style>` (en-US)、`<switch>`、`<text>`、`<view>` (en-US) |

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # NewDocument |

ブラウザの実装状況
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.