svg要素のviewBox属性について

width属性とは

たぶん、多くの人が、svg要素のwidth属性とheight属性を画像の幅と高さだと勘違いしています。
確かに、「画像の幅と高さ」で半分正解なのですが、viewBox属性とpreserveAspectRatio属性が絡むと、それは不正確ということになります。
もしかしたら、私の方が勘違いしている可能性があるかもしれませんので、ここで確認しましょう。width属性などとviewBox属性の違いは以下のとおりです。

width属性とviewBox属性の違い

1. width属性はウィンドウの幅を指定
2. viewBox属性は画像の視界範囲を指定

わかりやすくカメラで例えると

1. width属性はカメラのファインダー（あるいは、液晶画面）の幅を決める
2. viewBox属性は撮影風景の幅などを決める

つまり、svg要素のwidth属性とheight属性は

object要素やimg要素やiframe要素などといった、フレームの幅と高さを決めているだけです。画像における、いわゆるキャンバスの幅や高さを決めているわけではありません。
ですから、inkscapeで作ったSVG画像を、object要素のwidth属性やheight属性を使って、拡大縮小したいときには、svgのwidth属性とheight属性を削除して、preseveAspectRatio属性の値を"none"に指定し、viewBox属性で幅と高さを決めるといいかもしれません。