> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # レスポンシブSVGロゴ：小さい画面では組み合わせを切り替える > pictureのメディア条件で詳細版とコンパクト版のSVGロゴを選択。三つのビューポート幅で選ばれた画像を確認し、構成の切り替えと拡大縮小を分けます。 Source: https://perfectvector.com/ja/blog/responsive-svg-logo-lockup Language: ja Author: Irene Kim Published: 2026-10-06T08:00:00+09:00 Updated: 2026-10-06T08:00:00+09:00 レスポンシブなSVGロゴでは、すべての部分を一緒に縮める代わりに、詳細なロゴの組み合わせとコンパクトなマークを切り替えられます。まず二つの構成を作り、メディア条件を持つ``のソースで選択します。対応したい幅で、画像の`currentSrc`を確認してください。 この例では、架空のブランドCoveの独自のロゴ構成を使います。中空のひし形と描いた文字を組み合わせた版と、マークだけの版です。切り替えはドキュメントのビューポート幅によって決まります。広いページ内の狭いコンテナーでは、同じ切り替えは起きません。 ## 拡大縮小とアートディレクションは異なる作業 通常の拡大縮小は、構成全体を保ちます。シンボル、文字、間隔が一緒に小さくなります。アートディレクションは、別に作成した構成を選びます。文字を省く、マークを並べ替えるといったことはデザインの判断であり、SVGファイルが拡大縮小可能だからといって、自動で判断するわけではありません。 [HTMLのpictureリファレンス](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture)は、メディア条件による代替ソースの選択と、`img`へのフォールバックを説明しています。ここでは599ピクセル以下でコンパクトなSVGを、それ以外では詳細なSVGを提供します。画像の枠は同じサイズのまま、内容が変わります。 **ロゴ構成を縮めるか、別の構成を選ぶ** ![中空ひし形の詳細なロゴ構成、その縮小コピー、文字のないコンパクトなマークを比較する概念図](https://perfectvector.com/blog/responsive-svg-logo-lockup/scale-and-switch.webp) *模式図：縮小したロゴ構成は細部を保ちますが、別に作ったコンパクト版では文字を省けます。以下の実際のソース選択と要素範囲は、この生成図ではなく、独立したCoveのひな形に基づきます。* ## 編集可能な二つのファイルを作る 独自の詳細なロゴ構成を`detailed.svg`として保存します。文字は描画したパスなので、この小さな例にフォントファイルは必要ありません。 ```svg ``` コンパクト版を`compact.svg`として保存します。 ```svg ``` ひし形のパスは両ファイルで同一です。詳細版には五つのパス、コンパクト版には一つのパスがあります。どちらにも画像要素や生きたテキストはありません。二つの`viewBox`の幅が異なるのは、構成が違うためで、一方を均等に拡大縮小したためではありません。 元の二つのバージョンを保管してください。自分のブランドでは、コンパクトな構成でも認識できる必要がある特徴を決め、その後、開口部、余白、比率を確認します。[ロゴのファイル形式ガイド](https://perfectvector.com/ja/blog/logo-file-formats)は、元データと納品物全体を扱います。この例では、承認された二つの版をブラウザーで選ぶ機能を加えています。 ## 完全なpictureのひな形を実行する これを二つのSVGの隣に`starter.html`として保存し、フォルダーをローカル配信します。Pythonがあれば、`python3 -m http.server 8766`が一つの方法です。その後、ブラウザーで`http://localhost:8766/starter.html`を開きます。 ```html Cove logo source selection

Cove: choose the composition

Art-directed image, constant 200-pixel container:

Cove

Ordinary scaling, same container:

Cove

Art direction in a narrower 120-pixel container:

Cove 



```

メディア条件は`(max-width: 599px)`です。CSSの[widthメディア特性](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width)は、ビューポート幅を評価します。600ピクセルでは条件がfalseなので、このひな形は詳細な`img`ソースを選びます。これはこのレイアウトのブレークポイントの例で、ブランドデザインの規則ではありません。

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

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

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

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

| ドキュメントのビューポート | アートディレクション画像、200ピクセルコンテナー | 通常の拡大縮小、200ピクセルコンテナー | アートディレクション画像、120ピクセルコンテナー |
| ------------- | ------------------------- | -------------------- | ------------------------- |
| 480ピクセル       | compact.svg               | detailed.svg         | compact.svg               |
| 600ピクセル       | detailed.svg              | detailed.svg         | detailed.svg              |
| 960ピクセル       | detailed.svg              | detailed.svg         | detailed.svg              |

読み込んだ画像の寸法と一緒に、[`HTMLImageElement.currentSrc`](https://developer.mozilla.org/en-US/docs/Web/API/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ガイド](https://perfectvector.com/ja/blog/svg-preserveaspectratio)は、関連するSVGビューポートの計算を説明しています。その対応付けを変えるだけでは、二つ目のロゴ構成は作られません。

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

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

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

## よくある質問

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

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

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

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

## 出典

1. [HTMLのpicture要素](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture) — 代替ソース、メディア条件、フォールバック動作。
2. [CSSのwidthメディア特性](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width) — ひな形のドキュメントビューポート条件。
3. [画像のcurrentSrcプロパティ](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc) — 選ばれたソースURLの確認。
4. [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) — 選択した各構成を画像の枠内に収める方法。
5. [HTMLのimg要素](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) — 画像表示と代替テキスト。

***

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

## Explore

- [Read the HTML article](https://perfectvector.com/ja/blog/responsive-svg-logo-lockup)
- [ロゴのクリアスペース：余白を計算して保つ](https://perfectvector.com/ja/blog/logo-clear-space-calculation.md)
- [ロゴをベクター化する3つの方法とSVG品質の確認ポイント](https://perfectvector.com/ja/blog/how-to-vectorize-a-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)