今回の仕上がり
既定のmeetでは上下に余白ができ、円の形を保ちました。noneでは横と縦を別の倍率で拡大するため縦長になります。sliceは円の形を保って表示枠を埋める一方、黄色い図の左右が枠からはみ出します。すべて同じ座標と円を使った結果です。
座標と表示する枠を別に指定する
<svg width="200" height="200"
viewBox="0 0 200 100"
preserveAspectRatio="xMidYMid meet">
<circle cx="100" cy="50" r="20" fill="#175ead"/>
</svg>widthとheightは表示枠です。viewBoxは図を描く座標の範囲を指定します。横200・縦100の座標を正方形の枠に入れると、縦横比が一致しません。preserveAspectRatioで、その差をどう扱うかを選びます。
meetは図全体が入る同じ倍率を使い、空いた方向に余白を残します。sliceは枠を埋める同じ倍率を使い、はみ出した部分が見切れます。noneだけは縦横別々の倍率です。今回の枠では縦方向が横の2倍になるため、円が縦長になりました。
幅を変えて、欠け方も確認する
比較画面の「300×200で比べる」を押すと、3枚の幅を同時に変更します。文字のある図や操作説明では、枠が埋まったことだけで仕上がりとは判断せず、切れて困る部分が残っていないか確認してください。画面が狭い場合はCSSのmax-widthで縮み、指定値と実際の幅が異なることもあります。
自作例の表示と切り替えをブラウザーで検査しています。印刷、全ブラウザー、外部SVGの互換性は未検証。特定のSVGが崩れる原因を、この設定だけに断定する記事ではありません。確認日は2026年10月13日、自作HTML・図形はCC0です。
属性の説明はMDNのpreserveAspectRatioと照合しました。保存形式と画素の違いはSVGとPNGの拡大比較、図そのものを作る場合はMermaid Live Editorの実操作へ。最近のXは調査しましたが、この属性が新たに流行したとは確認していません。