<svg>

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.

<svg> はSVG の要素で、新しい座標系とビューポートを定義するコンテナーです。これは SVG 文書の最も外側の要素として使用されますが、SVG または HTML 文書の中に SVG の断片を埋め込むためにも使用できます。

メモ:xmlns 属性は SVG 文書の最も外側のsvg 要素、または XML シリアライズによる HTML 文書内にのみ必要です。内部のsvg 要素や HTML シリアライズによる HTML 文書の内部には不要です。

使用コンテキスト

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

属性

baseProfile非推奨;: この文書が要求する最小の SVG 言語プロファイルです。値の型:<string>、デフォルト値: なし、アニメーション:不可
height: 矩形ビューポートで表示される高さです。（それ自身の座標系の高さではありません。）値の型:<length>|<percentage>、デフォルト値:auto、アニメーション:可
preserveAspectRatio: svg フラグメントが、異なるアスペクト比での表示時にどう変形されるか。値の型: (none |xMinYMin |xMidYMin |xMaxYMin |xMinYMid |xMidYMid |xMaxYMid |xMinYMax |xMidYMax |xMaxYMax) (meet|slice)?、デフォルト値:xMidYMid meet、アニメーション:可
version非推奨;: 要素の内部の内容にどのバージョンの SVG が用いられるか。値の型:<number>、デフォルト値: none、アニメーション:不可
viewBox: 現在の SVG の断片の SVG ビューポート座標。値の型:<list-of-numbers>。、デフォルト値: none、アニメーション:可
width: 矩形ビューポートで表示される幅。（それ自身の座標系の幅ではありません。）値の型:<length>|<percentage>、デフォルト値:auto、アニメーション:可
x: SVG コンテナーが表示される x 座標。最も外側のsvg 要素では効果ありません。値の型:<length>|<percentage>、デフォルト値:0、アニメーション:可
y: SVG コンテナーが表示される y 座標。最も外側のsvg 要素では効果ありません。値の型:<length>|<percentage>、デフォルト値:0;アニメーション:可

メモ:SVG2 から、x,y,width,height は、幾何プロパティです。すなわち、これらの属性は CSS プロパティとしても用いることができます。

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>

動的なビューポートの単位の使用

この例では、svg 要素のheight 属性とwidth 属性は、ビューポートの幅または高さの小さい方の 60% に相当する動的ビューポート値60vmin を使用して設定されます。

<div>  <iframe       srcdoc='

html

<svg  viewBox="0 0 400 400"  xmlns="http://www.w3.org/2000/svg"  height="60vmin"  width="60vmin">  <rect x="0" y="0" width="50%" height="50%" fill="tomato" opacity="0.75" />  <rect    x="25%"    y="25%"    width="50%"    height="50%"    fill="slategrey"    opacity="0.75" />  <rect x="50%" y="50%" width="50%" height="50%" fill="olive" opacity="0.75" />  <rect    x="0"    y="0"    width="100%"    height="100%"    stroke="cadetblue"    stroke-width="0.5%"    fill="none" /></svg>

  '></iframe></div>

.resizer {  display: flex;  margin: 1rem;  padding: 0;  resize: both;  overflow: hidden;  border: 5px dotted red;  height: 400px;}.resizer > .resized {  flex-grow: 1;  margin: 0;  padding: 0;  border: 0;}

iframe の寸法を変更するには、右下の赤い点線の枠のサイズを変更してみてください。