レスポンシブSVGロゴ：小さい画面では組み合わせを切り替える

レスポンシブなSVGロゴでは、すべての部分を一緒に縮める代わりに、詳細なロゴの組み合わせとコンパクトなマークを切り替えられます。まず二つの構成を作り、メディア条件を持つ<picture>のソースで選択します。対応したい幅で、画像のcurrentSrcを確認してください。

この例では、架空のブランドCoveの独自のロゴ構成を使います。中空のひし形と描いた文字を組み合わせた版と、マークだけの版です。切り替えはドキュメントのビューポート幅によって決まります。広いページ内の狭いコンテナーでは、同じ切り替えは起きません。

拡大縮小とアートディレクションは異なる作業

通常の拡大縮小は、構成全体を保ちます。シンボル、文字、間隔が一緒に小さくなります。アートディレクションは、別に作成した構成を選びます。文字を省く、マークを並べ替えるといったことはデザインの判断であり、SVGファイルが拡大縮小可能だからといって、自動で判断するわけではありません。

HTMLのpictureリファレンスは、メディア条件による代替ソースの選択と、imgへのフォールバックを説明しています。ここでは599ピクセル以下でコンパクトなSVGを、それ以外では詳細なSVGを提供します。画像の枠は同じサイズのまま、内容が変わります。

ロゴ構成を縮めるか、別の構成を選ぶ

編集可能な二つのファイルを作る

独自の詳細なロゴ構成をdetailed.svgとして保存します。文字は描画したパスなので、この小さな例にフォントファイルは必要ありません。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
  <g fill="#176b5b" fill-rule="evenodd">
    <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
    <path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
    <path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
    <path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
    <path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
  </g>
</svg>

コンパクト版をcompact.svgとして保存します。

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>

ひし形のパスは両ファイルで同一です。詳細版には五つのパス、コンパクト版には一つのパスがあります。どちらにも画像要素や生きたテキストはありません。二つのviewBoxの幅が異なるのは、構成が違うためで、一方を均等に拡大縮小したためではありません。

元の二つのバージョンを保管してください。自分のブランドでは、コンパクトな構成でも認識できる必要がある特徴を決め、その後、開口部、余白、比率を確認します。ロゴのファイル形式ガイドは、元データと納品物全体を扱います。この例では、承認された二つの版をブラウザーで選ぶ機能を加えています。

完全なpictureのひな形を実行する

これを二つのSVGの隣にstarter.htmlとして保存し、フォルダーをローカル配信します。Pythonがあれば、python3 -m http.server 8766が一つの方法です。その後、ブラウザーでhttp://localhost:8766/starter.htmlを開きます。

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  .slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
  .narrow { width: 120px; }
  .slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
  <img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<pre id="report"></pre>
<script>
  const images = [...document.images];
  function report() {
    document.getElementById('report').textContent = JSON.stringify({
      viewportWidth: innerWidth,
      mediaMatches: matchMedia('(max-width: 599px)').matches,
      images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
        complete: image.complete, naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        containerWidth: image.parentElement.closest('.slot').clientWidth,
        elementWidth: image.getBoundingClientRect().width,
        elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
    }, null, 2);
  }
  images.forEach(image => image.addEventListener('load', report));
  addEventListener('resize', report);
  report();
</script>
</html>

メディア条件は(max-width: 599px)です。CSSのwidthメディア特性は、ビューポート幅を評価します。600ピクセルでは条件がfalseなので、このひな形は詳細なimgソースを選びます。これはこのレイアウトのブレークポイントの例で、ブランドデザインの規則ではありません。

CSSは80ピクセルの画像高さを確保し、object-fit: containで選んだ画像を要素の枠内に収めます。これにより、両構成を同じ縦横比に引き伸ばさずに見せられます。フィットのスタイルは、選んだソースを表示するimgに適用してください。

alt="Cove"は、どちらの場合も架空のブランドを示します。HTMLのimgリファレンスが説明するように、自分の画像に適切な代替テキストを付けてください。見える文字が消えても、コンパクトなマークのアクセシブルな名前を失ってはいけません。

三つの幅でブラウザーが選んだもの

このひな形をそのままChromeで開き、ドキュメントのビューポート幅を480、600、960ピクセルにしました。各幅で三つの画像はすべて読み込みを終えました。主コンテナーは幅200ピクセル、狭い対照例は幅120ピクセルを保ちました。

読み込んだ画像の寸法と一緒に、HTMLImageElement.currentSrcで選択されたURLを確認しました。URLが選択されているだけでは読み込み成功の確認になりません。completeと自然寸法も確認してください。このコンパクトなソースは96×96、詳細なソースは300×96を報告しました。

主画像要素は、三つの幅すべてで200×80のままでした。狭い対照例は120×80です。480ピクセルでは、各枠の中央にコンパクトなマークが置かれ、通常の拡大縮小の対照例は引き続きロゴ全体を表示しました。600と960ピクセルでは、コンテナーを120ピクセルに狭めると詳細版が小さくなりましたが、コンパクトなファイルは選ばれませんでした。

この違いは、サイドバーや再利用するコンポーネントで重要です。このHTMLのメディア条件が反応するのはビューポートであり、コンテナーの計測幅ではありません。ロゴの選択をコンポーネントの利用可能な幅に依存させる必要がある場合は、このブレークポイントがコンポーネントを見ていると考えず、別の仕組みを計画してテストしてください。

この結果は、元のファイル、一つのブラウザー、明示した三つのビューポート幅を対象とします。すべてのブラウザー、埋め込み方法、書き出し先を確認したものではありません。また、このひな形は外部SVG内のメディアルールをテストしていません。

枠とアートワークを別々に確認する

要素の枠と、塗られたロゴの範囲は同じではありません。詳細版のブラウザー上の形状範囲は、300×96のviewBox内でx8、y8、幅274、高さ80でした。コンパクト版は96×96のviewBox内でx8、y8、幅80、高さ80です。その余白は、ソースのフィット計算に含まれたままです。

選択されたロゴが小さく見える場合は、要素寸法を増やす前に元画像の余白を調べてください。引き伸ばされて見える場合は、画像の枠とフィット規則を確認します。preserveAspectRatioガイドは、関連するSVGビューポートの計算を説明しています。その対応付けを変えるだけでは、二つ目のロゴ構成は作られません。

このひな形はimgを通して外部SVG画像を使います。別の埋め込み方法を選ぶ必要がある場合は、インラインSVGとimgのガイドを使ってください。ダウンロードや印刷したSVGファイルに、このHTMLのソース選択の囲みは含まれません。受け手が必要とする実際の構成を渡し、編集可能な版を保管します。

ラスターロゴから複数の版を準備する

ブランドのアートワークがPNGやJPGでしかなく、編集可能な形状が必要な場合は、PerfectVectorでSVGロゴを準備し、シルエットと内側の開口部を確認して、きれいなマスターを残します。その後、詳細版とコンパクト版の構成を作り、ページで選択をテストしてください。ベクター化はアートワークを準備するもので、どの文字を省くかを決めたり、ブレークポイントを選んだりしません。きれいなSVGがすでにある場合は、直接構成の作業に進めます。ベクター化ガイドで、変換が役立つ場面を説明しています。

よくある質問

SVGは小さい画面で自動的にロゴを単純化しますか？ この例は、作成した二つのSVGファイルから選びます。一つのファイルを拡大縮小しても元の構成は保たれ、単純化には別のデザイン判断が必要です。

狭いコンテナーでも詳細版のロゴが表示されるのはなぜですか？ pictureソースの幅条件は、ドキュメントのビューポートを確認します。テストした600と960ピクセルのビューポートでは、120ピクセルのコンテナーも詳細版のソースを維持しました。

どのファイルが使われたかを確認するにはどうしますか？ 画像のcurrentSrc、読み込み状態、自然寸法を確認してください。ひな形では、要素とコンテナーの寸法と一緒に表示します。

SVGをダウンロードするとレスポンシブな切り替えも含まれますか？ ソース選択の規則はHTMLの囲み内にあります。受け手の実際の用途に必要な詳細版またはコンパクト版のSVGを保管し、渡してください。

出典

1. HTMLのpicture要素 — 代替ソース、メディア条件、フォールバック動作。
2. CSSのwidthメディア特性 — ひな形のドキュメントビューポート条件。
3. 画像のcurrentSrcプロパティ — 選ばれたソースURLの確認。
4. CSS object-fit — 選択した各構成を画像の枠内に収める方法。
5. HTMLのimg要素 — 画像表示と代替テキスト。

自分のPNGやJPGロゴには、編集可能なSVGマスターを準備し、輪郭と開口部を確認して、承認済みのロゴ構成と一緒に保管してください。その後、ページで使うビューポート幅で、選ばれたソースと見える構成を検証します。