<svg>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

例

入れ子の svg 要素

この例では、入れ子になった svg 要素には xmlns 属性が必要ないことを示しています。

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 を使用して設定されます。

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 の寸法を変更するには、右下の赤い点線の枠のサイズを変更してみてください。

属性

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

The SVG viewport coordinates for the current SVG fragment. 値の型: <list-of-numbers>。、既定値: none、アニメーション: 可

width

矩形ビューポートで表示される幅。（それ自身の座標系の幅ではありません。） 値の型: <length>|<percentage>、既定値: auto、アニメーション: 可

x

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

y

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

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

使用コンテキスト

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# NewDocument

ブラウザーの互換性

BCD tables only load in the browser