<svg>

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

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

<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="

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

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