【HTML】SVGタグの上部や下部が見切れるのはなぜ？原因と対処法

HTML

2025/8/9

記事内に広告が含まれていることがあります。

SVGは超軽量で拡大/縮小しても劣化しないためWEB関連の図形を描くのに非常に適しています。

描き方もとても簡単で、規則性に沿ってタグや位置、長さなどを定めるだけです。

ところ、SVGを書いているときに図形が見切れてしまうことがあります。例えば以下のような状態です。

<svg>
  <circle cx="300" cy="180" r="120" fill="lightblue" />
</svg>

本来なら、右上から(300px, 180px)の位置を中心として半径120pxの円を描きたいのですが、左上しか映っていません。

この記事では、この原因と対処法について解説しています。

見切れてしまう原因

SVGで描画した図形が見切れてしまう原因は「SVGのデフォルトの描画領域（ビューポート）が限られているため」です。

SVGタグのデフォルトの描画領域（キャンバスのサイズ）は多くのブラウザで幅300px、高さ150pxになっています。

上記の例だと、右上から(300px, 180px)の位置を中心として半径120pxの円を描いたので、X軸方向はちょうど半分の150px、Y軸方向は30pxのみ（180-150px）しか表示されないわけです。

SVGタグはwidthとheight属性を使って描画領域を指定することができます。

例えば、先ほどの円であれば、widthとheight属性を指定して円が全て描画領域内に入るようにすることができます。

<svg width="600" height="300">
  <circle cx="300" cy="180" r="120" fill="lightblue" />
</svg>

見切れることなく描くことができました。

SVGタグで描いた図形が見切れてしまう、、、という方はSVGタグにwidthとheight属性を設定してみてください。