SVGのviewBoxとは・仕組み
重要な概念
viewBox はSVGで最も重要な属性のひとつです。内部の座標系（描画のどの部分を表示し、どう拡縮するか）を定義します。
構文
viewBox="min-x min-y 幅 高さ"
例：viewBox="0 0 100 100" は、左上を原点とする100x100単位の内部キャンバスを作ります。
viewBox と width/height
- viewBox：描画の内部単位を定義。
- width/height：画面上の実サイズを定義。
viewBox="0 0 100 100" と width="300" なら、100単位の描画が300pxに引き伸ばされます：3倍でも鮮明（ベクターだから）。
なぜ拡縮に重要か
viewBoxがあり固定のwidth/heightがなければ、SVGは比率を保ってコンテナに合わせます。これがレスポンシブSVGの基礎です。
preserveAspectRatio
コンテナの比率が異なる場合の合わせ方を制御します：
xMidYMid meet（既定）：全体を収め中央寄せ。slice：はみ出しを切り取って領域を埋める。none：比率を無視して引き伸ばす（変形）。
トリミング・再フレーム
viewBoxを変えると再フレームできます：viewBox="20 20 60 60" はその領域だけを表示（ズーム/トリミング）し、図形自体は変えません。
エディタでは
svgdeskでは、キャンバス作成時に選んだサイズでviewBoxが定義され、コードパネルで確認・調整できます。