HTML5 ドキュメントでリンクまたはインライン化された SVG 画像は、(Web 標準から見て) 比較的新しい手法ですが、急速に成熟することが重要であると考えています。最新のブラウザは、縦横比のみを示す svg 画像のいずれかのタイプのサイズをどのように設定する必要がありますか ( に従ってviewBox)、および親 HTML ドキュメントに幅または高さのいずれか (両方ではない) が指定されている場合
トピックを有効に絞り込むために、この質問は<!DOCTYPE html>HTML5 ドキュメントのみに関連しています。
いくつかの異なる HTML コンテキストでこれを示すテスト ページを作成しましたが、Firefox だけが、テストしたすべての状況で、どちらかから 1 つを推測して、私が期待する (そして好む) ように動作します。以前のテストでは、Chrome も同様でしたが、現在はそうではありません。オペラはとても近いです。
この質問の背景と背景
SVG について私が気に入っている点の 1 つは、画像のどの部分を表示するか (およびオプションでトリミングするか) を指定する限り、この形式を使用すると、ドキュメントのサイズに関係なくレンダリングする画像を作成できることです。描画する必要がある大きさを指定します。
実際には、これにより、きれいなロゴを取得し、ブラウザ ウィンドウを好きなサイズに変更するだけで、ブラウザで自由に表示およびサイズ変更でき、大騒ぎせずに新しいバウンディング ボックスに喜んで描画されます。
これは要素にviewBox属性を設定することによって達成されますが、属性ではなく、そのアスペクト比を保持し、(デフォルト) のsvg 配置とトリミング戦略を使用します。これは、本質的に CSS3 背景画像仕様の意味を意味します。<svg>widthheightpreserveAspectRatio="xMidYMid meet"background-position: 50% 50%; background-size: contain;