SVG ViewBoxの動作確認

viewPortの値（実際の表示エリアのサイズ）

w: h:

viewBoxの値

x: y: w: h:

SVG（Circle）の値

cx: cy: r:

※circleのcx, cyは中心座標を、rは半径を示す

□グレーマス: 10px × 10px
□赤マス: 100px × 100px

■初期値

<svg width="500" height="300" viewBox="0 0 500 300">
  <circle cx="10" cy="10" r="10" fill="rgba(50,205,50, 0.6)" />
</svg>