SVGのviewBoxって何？表示サイズと中の座標を分けてみよう

SVGを拡大したら端が切れちゃった。そんなときは、表示する大きさと、中の座標を分けて考えてみよう。

図：200×100の内部座標を400×200へ対応づける、同じ縦横比の例。

viewBoxは4つの数値

<svg width="400" height="200" viewBox="0 0 200 100">
  <rect x="10" y="10" width="180" height="80" />
</svg>

viewBoxの値はmin-x、min-y、幅、高さ。この例では、内部の200×100という範囲を、400×200の表示領域へ対応づけるよ。数字の意味を確認せず、widthだけを大きくして直そうとしないことが大切。

図形の線にも幅がある

図形の中心線が範囲に収まっても、太い線や影が外へ出る場合があるよ。例えばx=0の位置に線幅10で描いた線は、その左右に広がる。見切れがあるなら、座標、線幅、フィルター領域、親要素のoverflowを順番に確認しよう。

同じ図を2つの大きさで表示

作例のSVGを開く・保存する。200×100の座標内に収まる図形を用意したよ。HTML側で幅を変えて、図の比率がどう保たれるか試してね。

.demo-image {
  width: 100%;
  max-width: 600px;
  height: auto;
}

これは画像として読み込む場合のCSS例。表示枠とviewBoxの縦横比が異なる場合は、preserveAspectRatioなどの設定も確認してね。

ロゴを直す前に確認したいこと

1. 元のSVGを残してから編集する。
2. viewBoxの幅・高さが正の値か確認する。
3. 図形・線・影が範囲から出ていないか見る。
4. 画像単体と、実際に載せるページの両方で確認する。

受け取ったSVGはコードも含むデータなので、出所が不明なファイルをそのまま信頼しないようにしよう。この作例は編集部で作った図形で、外部スクリプトや画像は含めていないよ。

ラスターとベクターの違いも一緒に読むと、用途から形式を選びやすくなるよ。