<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 プロパティとしても用いることができます。

DOM インターフェイス

この要素は SVGSVGElement インターフェイスを実装しています。

例

入れ子の `svg` 要素

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

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # NewDocument

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年10月24日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content