SVGロゴの表示ずれを防ぐ：幅と高さや縦横比で先に場所を確保する

SVGロゴは鮮明でも、表示された瞬間に周囲の内容を押し動かす場合があります。HTMLの画像要素で読み込む外部SVGでは、ファイルの固有寸法が分かる前にボックスを確保できるだけのサイズ情報をブラウザーへ渡します。一致するwidthとheight属性が出発点になり、CSSでレスポンシブにできます。

これはページレイアウトの問題を直す方法です。ロゴのパスや、キャンバス内部の空白は変えません。使える元のベクターは残します。PNGやJPGしかない場合は、編集可能な図案を別途復元し、その後で配信するSVGの位置をページに意図して用意します。

図と、先に確保するボックスを分ける

関連する3つの寸法を確認します。

viewBox="0 0 300 100"は、3:1の元長方形を表します。外部ファイルでは、その情報はページが取得するリソースの中にあります。リソースが得られる前に周囲のHTMLへ同じ比率を置くこととは異なります。

MDNの画像要素の解説は、画像の読み込み前に場所を用意するため、widthとheightの両属性を使うことを推奨しています。Googleのレイアウトシフトのガイドも、画像寸法の欠落を移動の一般的な原因に挙げ、寸法やCSS比率で場所を確保する方法を説明しています。

すでに決まったビューポートへの図の収まり方が問題なら、別のSVGの縦横比とフィッティングのガイドを使います。ボックスの確保と、その中への図案の配置は別の確認です。

一致する幅と高さの属性から始める

3:1のマークなら、単純な配信方法は次のようになります。

<img
  class="brand-logo"
  src="/assets/brand-logo.svg"
  width="300"
  height="100"
  alt="Example brand"
>

.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

属性が意図する比率を伝えます。CSSは表示幅を設定し、コンテナーが狭くなれば比率を保って縮小できるようにします。すべての機器でロゴが物理的な画面ピクセル300個を占める必要があるという意味ではありません。

意図した余白も含め、実際の画像キャンバスの寸法を使います。配信SVGの元長方形が広い場合に、見える文字だけの範囲を入れないでください。先に確保した場所と読み込んだリソースが一致しなくなります。

値の一致が重要なのは、読み込み後に画像の自然比率が使われる場合があるためです。初期比率が誤っていれば、後でサイズが補正される場合があります。ロゴを交換したら、ファイル名を保てば形状も同じだと考えず、マークアップと配信ファイルを両方確認します。

レイアウト側で枠を決める場合はCSS比率を使う

コンポーネントが特定のボックス形状を定義するなら、CSS比率が便利です。3:1を保つ画像なら、次のとおりです。

.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}

MDNのaspect-ratioの解説は、このプロパティが自動サイズ計算に参加すると説明しています。優先比率が計算に影響するには、少なくとも1方向を自動にする必要があります。幅と高さの両方を固定しているなら、まずその明示値を調べます。

元の比率が違う場合の意図する動作を選びます。固定形状の枠には、独自のラッパーと意図した画像フィッティングが必要かもしれません。比例させるロゴには、通常、正しい元比率を使います。以前のCSSを残すためだけに、正方形のロゴを前のワードマークの3:1へ押し込まないでください。

auto 3 / 1には別の意味があります。置換要素に暫定比率を与え、自然比率が分かればそちらを使えます。暫定比率と最終比率が一致するなら便利ですが、相反する寸法で絶対に何も動かないという保証ではありません。

制御したブラウザーの例で分かったこと

F字形マーク、点、矢印を含む独自の300 × 100 SVGを作りました。3つのHTML画像要素は、最初はソースURLを持ちません。初回レイアウト後、ボタンで同じローカルSVGを3つすべてに割り当てます。低速ネットワークを測ったように見せず、前後の状態を観察できるようにしました。

3つともCSS幅300px、高さ自動です。1つは比率を確保せず、1つはwidth="300" height="100"、もう1つはaspect-ratio: 3 / 1を持ちます。

確保しない例では、テキスト上端の座標が358.1875から458.1875へ変わりました。確保した2例では458.1875のままでした。各画像が報告する自然寸法は300 × 100で、表示幅と高さも300 × 100を保っています。

これは1つのブラウザーの制御された1ページで、実際に測った要素位置です。実験では手動でURLを割り当てました。ネットワーク速度制限のトレース、Core Web Vitalsのスコア、複数ブラウザーの挙動は記録していません。特に100pxの移動は距離であり、CLSスコアではありません。

ファイルだけでなく、実際のコンポーネントを確認する

修正を検証するときは、本来のロゴ配置を使います。

1. 元データを確認します。 配信するSVGを開き、キャンバス比率を調べます。比較用に変更していないマスターを残します。
2. 初期サイズを調べます。 画像寸法が分かる前に、HTMLやCSSが意図するボックスを与えるか確認します。
3. 要素位置を比較します。 ロゴの鮮明さだけでなく、近くの見出しやナビゲーション項目を見ます。
4. 読み込み後を確認します。 最終の幅、高さ、比率を、確保した場所と比較します。
5. 狭いコンテナーと広いコンテナーを試します。 レスポンシブ規則がマークを比例縮小し、周りの操作要素が使えることを確かめます。

読み込みを確認するには、開発者ツールでキャッシュを無効にし、適切なネットワーク設定で実際のページを再読み込みします。これはボタン式の例とは別の条件を確認します。遅延読み込み画像を使うページなら、その位置をスクロールして確認します。

まだ動くなら、その瞬間に何が変わったかを特定します。フォントの切り替え、バナー挿入、広がるナビゲーション行、別の画像が、ロゴ自身のボックスが安定していてもロゴを動かす場合があります。web.devのガイドは画像サイズとほかの原因を区別しています。1つのロゴの場所確保は、サイト全体の性能監査ではありません。

近くで起きる別のSVG問題を分ける

画像ボックスが変わらず、その下に小さい帯がある場合は、インラインの文字行の問題かもしれません。画像の確保寸法とは別に、displayと縦位置を調べます。文字行内で要素を動かすことと、未取得画像の場所を確保することは、レイアウトの異なる時点を扱います。

位置は動かないのに広い空白が見えるSVGでは、キャンバスやフィッティングを確認します。元データを切り詰めると比率が変わるため、その後でページの確保比率も更新します。インラインSVGと画像の説明は、文書要素と外部画像のどちらを装飾しているかを判断する助けにもなります。

元のマークがピクセルしかない場合は、PerfectVectorのロゴのベクター化で編集可能な候補形状を準備します。配信キャンバスを選ぶ前に、シルエットと開口部を元画像と比較します。その形状確認はトレース品質の評価表で扱います。ベクター化は、サイトのHTML寸法、CSS比率、読み込み動作を設定しません。

よくある質問

SVGのviewBoxだけでレイアウトシフトを防げますか？ 外部画像では、viewBoxは取得するリソース内にあります。画像の固有寸法が分かる前に場所を確保できるよう、HTMLレイアウトに一致するサイズ情報を与え、最終コンポーネントを確認します。

widthとheight属性を残しても、SVGロゴをレスポンシブにできますか？ はい。一致する属性で意図する比率を与え、CSSで表示幅を制御し、高さを自動にできます。配信ファイルとレスポンシブ規則がその比率を保つか確認します。

鮮明なSVGなら、よいCLSスコアになりますか？ いいえ。鮮明さは図案の描画に関する性質です。CLSはページ全体のレイアウトの不安定さで、フォント、挿入内容、ほかのメディアも関わります。制御された例での移動距離はCLSスコアではありません。

出典

1. web.dev：Cumulative Layout Shiftを最適化する：画像寸法の欠落、場所の確保、ほかの移動原因、移動とCLS指標の違いです。
2. MDN：HTMLの画像要素：幅と高さの属性、自然な画像寸法、画像レイアウトです。
3. MDN：aspect-ratio：自動サイズ計算、指定比率とautoに比率を加えた形式の違いです。

ラスターのロゴしかありませんか？ PerfectVectorで編集可能なSVGを準備し、輪郭とキャンバスを確認してから、表示するページに一致する場所を確保してください。