インラインSVGの下の隙間を直す：CSSの行ボックスと位置合わせ

SVGの下の細い隙間は、そのSVGを含むHTMLの行から生じる場合があります。インライン画像は文字のレイアウトに参加するため、ベースラインと行の高さによって、そのボックスの下に余裕が残ることがあります。単独の画像ならdisplay: blockを試します。文字の隣に置く必要がある画像なら、インラインの位置合わせを意図して選びます。

まず隙間の位置を調べます。SVG要素のボックスの外側ならページのレイアウトを確認します。ボックスの内側なら、SVGのキャンバスや収め方の規則が関係する場合があります。ロゴを再トレースしても、前者は直りません。このガイドでは両者を区別し、小さく局所的なCSS修正を検証します。

空間がどのボックスにあるか調べる

ブラウザーの開発者ツールで、SVGとその直近のラッパーに対照的な背景色を付けます。要素の輪郭も調べます。背景は一時的な診断用であり、納品する図案に含める必要はありません。

.logo-wrap {
  background: peachpuff;
}
 
.logo-wrap > svg {
  background: lightgreen;
}

緑のSVGボックスより下に桃色が続くなら、ラッパーの行レイアウト、パディング、枠線、高さ、隣接要素を調べます。見える図より下に緑が続くなら、図案のviewBox、描画範囲、ビューポートへの収め方を調べます。

両方が同時に起こる場合もあります。行ボックスを直すと細い帯が消えても、画像内部の大きな透明余白が残ることがあります。SVGのフィッティングのガイドは、元の長方形と配置先ビューポートの関係を説明しています。不要な空間が内側にあると分かるまで、viewBoxを詰めないでください。

埋め込み方法も重要です。インラインの<svg>はHTML文書の一部で、<img src="logo.svg">は外部画像を読み込みます。インラインSVGと画像のガイドが説明するように、スタイルを適用できる境界が異なります。すべてのSVGファイルが同じように埋め込まれると考えず、HTMLの行に置かれた要素を調べます。

ベースラインの下に余裕が残る理由

文字の行には、gやpのようにベースラインより下へ伸びる文字の余裕が必要です。インライン画像がベースラインにそろっても、それを含む行は下へ続く場合があります。そのため、画像のマージンをゼロにしても変わらないことがあります。

CSSの行高の計算規則は、参加するボックスとその位置合わせから行ボックスを決めます。見える内容が画像でも、親のフォントと行高が影響します。したがって、この帯は固定のSVG余白ではなく、周囲のスタイルの結果です。

このベースラインと、SVGの中に描かれた文字のベースラインを混同しないでください。SVGのテキスト要素のdominant-baselineは、内部の文字を調整します。画像全体がHTMLの行のどこに置かれるかを決めるものではありません。

SVGキャンバスに空白のない実測例

同じSVGを3つ含む独自のHTMLページを作りました。各SVGは240 × 100のviewBoxを持ち、長方形で端から端まで塗られ、240 × 100 CSSピクセルで表示されます。各行はArialの40px、行高48pxを使います。変えるのはSVGの表示形式または位置合わせだけです。

ブラウザーから次の要素寸法が返りました。

これは1つのブラウザーでの、このページの測定です。すべてのレイアウトで10.5pxの隙間ができるという保証ではありません。ラッパーの下端座標とSVGの下端座標を比較しました。SVGの高さは3例とも100pxを保っており、修正で図を縮小したり切り抜いたりしていません。

単独の画像にはブロック表示を使う

ロゴを独立した行に置く場合は、その特定の画像にレイアウト規則を設定します。

.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}

MDNのdisplay解説は、通常フローにおけるブロックとインラインの参加を区別しています。SVGをブロックにすると、周囲の文字行のインライン項目としての役割がなくなります。元のパスを編集したり、図案内部の透明余白を除去したりするものではありません。

規則を適用した後、ラッパーを確認し直します。まだ画像より下へ延びるなら、明示的な高さ、パディング、別の子要素、疑似要素、追加の行を探します。ブロック画像の後の改行やテキストノードが独自の内容を作る場合があります。見える空間の原因が祖先要素の場合もあります。

セレクターは狭く保ちます。サイト全体へsvg { display: block; }を適用すると、ラベルや文章内に意図して置いたアイコンまで動くことがあります。単独画像が必要なコンポーネントを選び、ほかの利用箇所も調べます。

文字の行ではインラインを保ち、位置合わせを選ぶ

文字の隣のアイコンや小さなマークは、インラインを保つのが意図した配置かもしれません。vertical-align: bottomは、下のマージン端を行の下端にそろえます。vertical-align: middleは親のベースラインとxハイトを使い、あらゆるコンテナーで画像を幾何学的な中央へ置く命令ではありません。MDNのvertical-alignの定義をご覧ください。

.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

実際のラベルとフォントを見て値を選びます。行の下端に接するアイコンは、大文字の隣では低すぎて見える場合があります。middleにしたマークでも、内部の見える図案が偏っていれば、視覚上の調整が必要なことがあります。

この例の下端合わせの行には、画像しか含まれていません。その特定の行で帯が消えたことは確認できますが、文字とアイコンが混在するすべての行が同じ高さや見た目になるとはいえません。

最初の修正として、共有のテキストコンテナーにline-height: 0を使うのは避けます。画像間隔だけでなく文字レイアウトも変わります。目先の症状を隠しても、後でラベルを加えたときに上書きへ依存するコンポーネントになる場合があります。親の文字設定を変える前に、意図する表示形式や位置合わせを選んでください。

図案を変えずに修正を検証する

1回に1つだけ変え、次を確認します。

1. 要素の境界： 見える隙間は、現在SVGボックスの内側と外側のどちらか。
2. 寸法： SVGが意図した幅、高さ、縦横比を保ったか。
3. 隣接要素： ラベル、リンク、アイコンが引き続き適切な位置にあるか。
4. レスポンシブ配置： コンポーネントが狭いサイズと広いサイズで正しく動くか。
5. 計算済みスタイル： 意図した宣言が有効か、より詳細な規則で上書きされていないか。

枠線やパディングのない単純なラッパーなら、下端座標と画像の下端座標の比較が役立ちます。実際のコンポーネントでは、差を誤りと判断する前に、意図したパディングやほかの内容を考慮します。

小さい画面でページ配置が変わるなら、その配置も確認します。単独のロゴでうまくいく修正が、文字が折り返すナビゲーション行にも合うとは限りません。境界が分かったら、一時的な背景色を取り除きます。

この工程でベクター化が役立つ場面

ここで既存の編集可能なSVGに必要なのは、通常CSSかキャンバスの修正です。ファイルを残し、再構築する前に配置を診断します。

マーク自体がPNGやJPGでしかなく、編集可能な輪郭が必要な場合は、PerfectVectorで元画像をベクター図案へ変換し、ページに置く前に輪郭、開口部、元キャンバスを調べます。トレース品質の評価表が、その別の形状確認に役立ちます。ベクター化は形状を準備し、HTMLの行ボックスは引き続きページのCSSが制御します。

よくある質問

margin: 0でもSVG下の隙間が消えないのはなぜですか？ 空間がSVGのマージンではなく、それを含む文字の行に属する場合があります。SVGとラッパーの境界を調べ、単独画像ならブロック表示、インライン画像なら適切な縦の位置合わせを試します。

display: blockは、SVG内の余白を切り取りますか？ いいえ。HTMLレイアウトへの要素の参加方法を変えます。viewBox内の空間は残り、図案やフィッティングを別途確認する必要があります。

vertical-alignはbottomとmiddleのどちらを使うべきですか？ 実際の行に合う値を使います。bottomは行の下端、middleは親のベースラインとxハイトに従います。どちらも万能な中央配置と考えず、最終フォントと隣の文字で結果を確認してください。

出典

1. W3C：CSSの行高と縦位置の調整：参加するボックス、位置合わせ、親の文字設定が行高に影響する仕組みです。
2. MDN：display：通常フローでのブロックとインラインの参加の違いです。
3. MDN：vertical-align：ベースライン、bottom、middleの位置合わせと、プロパティの対象ボックスです。

ラスターしかないマークから始めますか？ 編集可能なSVG形状を準備し、輪郭とキャンバスを元画像と比較してから、実際のページコンポーネントでSVGの配置を確認してください。