きっかけ

SVGに興味があり、以下の記事をなんとなく読んでいたが、viewBoxの部分の理解に時間がかかったので備忘録として。
How to Scale SVG

ていうかこっちの記事の方が分かりやすかった。英語は難しいな。
SVGコードの基本

viewBoxは表示領域の中の座標軸の設定

  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="100" fill="yellow"></circle>
</svg>

この場合
widthとheightで横幅200px、縦幅200pxの表示領域が作られる。
その表示領域の左上の座標を(0,0)とし、そこから横に200、縦に200いったところに右下の座標をおく。
viewBoxの説明を見ていると、viewBox="x, y, width, height"っていつも説明されているけどこのwidthとheightっていうのが分かり辛かったんだと思う。
左上の座標(x, y)からどれくらい横と縦に移動して右下の座標にするかってことだったのね。

preserveAspectRatio

viewBoxのアスペクト比とwidth属性とheight属性で設定した値のアスペクト比が異なる場合viewBoxに描画されたものがどう振る舞うかを設定するのがpreserveAspectRatio。

１個目：
普通のやつ

２個目：
１個目のやつをアスペクト比は変えずに表示領域を大きくしてみた。
中に書かれたcircleは勝手に大きくなってくれた。

３個目：
表示領域とviewBoxのアスペクト比を変えてみた。
preserveAspectRatioなし。
表示領域に対して勝手にセンター寄せになってくれた。
ちなみに座標軸の設定も変えて、(0, 0)が表示領域のセンターにくるようにしてみた。

４個目：
３個目のやつにpreserveAspectRatio属性を追加。
表示領域いっぱいに表示させた。