<!-- viewboxの属性値は x,y,width,height  -->
<!-- (1)描画エリア=表示エリア -->
<div>
  <svg width="400" height="400" viewBox="0, 0, 400, 400" style="background: #eee">
    <circle cx="50" cy="50" r="50" fill="black" />
  </svg>
</div>
 
<!-- (2)描画エリアのwidthに対して表示エリアのwidhtが半分 -->
<div>
  <!-- preserveAspectRatio="meet"で表示エリアのスペースに収まるようにcircleが配置される -->
  <svg width="400" height="400" viewBox="0, 0, 200, 400" style="background: #eee">
    <circle cx="50" cy="50" r="50" fill="black" />
  </svg>
</div>
 
<!-- (3)描画エリアのwidht,heightに対して表示エリアのwidth,heightが半分(描画エリアは縮まらないため表示エリアが拡大表示される) -->
<div>
  <svg width="400" height="400" viewBox="0, 0, 200, 200" style="background: #eee">
    <circle cx="50" cy="50" r="50" fill="black" />
  </svg>
</div>
 
<!-- (4)表示エリアのwidth,heightがcircle要素の直径と一致しているため表示エリア一杯にcircleが表示される+描画エリアは縮まらないため表示エリアが拡大される -->
<div>
  <svg width="400" height="400" viewBox="0, 0, 100, 100" style="background: #eee">
    <circle cx="50" cy="50" r="50" fill="black" />
  </svg>
</div>
 
<!-- (4)の条件に、viewboxのx,yを変更して表示エリアをずらす(見切れる) -->
<div>
  <svg width="400" height="400" viewBox="25, 25, 100, 100" style="background: #eee">
    <circle cx="50" cy="50" r="50" fill="black" />
  </svg>
</div>
 
<!-- (4)の条件に、svg要素にwidth:100% height=100vhが適用された場合 -->
<!-- preserveAspectRatio="xMinYMin meet"でx軸y軸で開始位置に寄せる(その他も指定可能) -->
<div>
  <svg id="svg" viewBox="0, 0, 100, 100" style="background: #eee" preserveAspectRatio="xMinYMin meet">
    <circle cx="50" cy="50" r="50" fill="black" />
  </svg>
</div>
<!-- preserveAspectRatio="none"で表示エリアのスペースに収まるようにcircleが配置される -->
<div>
  <svg id="svg" viewBox="0, 0, 100, 100" style="background: #eee" preserveAspectRatio="xMidYMid meet">
    <circle cx="50" cy="50" r="50" fill="black" />
  </svg>
</div>
<!-- preserveAspectRatio="none"で表示エリアのスペースに収まるようにcircleが拡大される -->
<div>
  <svg id="svg" viewBox="0, 0, 100, 100" style="background: #eee" preserveAspectRatio="none">
    <circle cx="50" cy="50" r="50" fill="black" />
  </svg>
</div>
#svg {
  width: 100%;
  height: 100vh;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.