svg 要素の viewBox 属性について
svg 要素内の各描画要素に設定する座標値のデフォルト単位はピクセル (px) ですが、上位の svg 要素に viewBox 属性が設定されている場合は、その論理的な座標系（ユーザー座標系）の座標値を指定することになります。
例えば、次のように viewBox を設定すると、画面上での svg 要素の表示サイズは 800px x 600px となりますが、svg 要素内に配置する各描画要素 (rect など）は、40x30 という仮想的なサイズの中で座標指定することになります。
<svg width="800" height="600" viewBox="0 0 40 30">viewBox 属性を指定してある場合は、width 属性と height 属性の一方を省略して記述できるようになります。
その場合は、viewBox のアスペクト比を考慮した width あるいは height が自動的に設定されます。
よって、上記の svg タグは次のように省略して記述することが可能です。
<svg width="800" viewBox="0 0 40 30">下記の例では 1 つの rect 要素を配置していますが、これは svg 要素の左上 4 分の 1 を占める矩形を描画します。
<svg width="200" viewBox="0 0 40 20">
<rect x="0" y="0" width="20" height="10" fill="steelblue" />
</svg>
表示例
svg 要素のレスポンシブ対応
svg 要素も img 要素と同様に、CSS で max-width: 100%; と指定しておけば、横幅が足りなくなった場合に縮小して表示することができます。
max-width: 100%; を設定した svg 要素
<svg id="mysvg" width="800" viewBox="0 0 20 10" style="max-width: 100%;">
<rect x="1" y="1" width="8" height="8" fill="pink" />
<circle cx="15" cy="5" r="4" fill="lightblue" />
</svg>ちなみに、max-width: 100%; の指定により縮小された svg 要素の実際のサイズを取得するには、以下のように svg 要素の clientWidth プロパティや、getBoundingClientRect() メソッドを使用します。
// ウィンドウサイズ変更時に svg 要素の実際のサイズを取得
window.addEventListener("resize", function(event) {
const svgElem = document.getElementById("mysvg");
const width = svgElem.clientWidth;
console.log(`width=${width}`);
// 次のようにすると、ボーダー領域を含めたサイズを取得できます
// const width = svgElem.getBoundingClientRect().width;
// 次のようにすると、常に 800（属性で指定した固定値）が返されることに注意
// const width = svgElem.getAttribute("width");
});