SVG
SVG要素

viewBox

viewBox属性は、 <svg>要素の座標系を定義します。これにより、描画された各要素の位置と大きさを調整することなく、SVGグラフィックのサイズと相対的な比率を簡単に変更することができます。

<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

そのコードは次のようになります。

viewBoxがなければ、次のようになります。

preserveAspectRatio

preserveAspectRatioは、イメージを均一にスケーリングする必要があるかどうかを示す属性です。この属性は、 <svg>要素にもviewBoxがある場合にのみ機能します。

デフォルト値はxMidYMid 、これはアスペクト比を維持し、パスをSVGコンテナの中心にxMidYMidます。

<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

preserveAspectRatioがnoneに設定preserveAspectRatioいる場合、アイコンはボックスに収まるように伸びます。

<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

preserveAspectRatioは他にも多くの値がありますが、これらの2つがはるかに一般的です。

preserveAspectRatio - 属性の一致とスライス

preserveAspectRatio属性にはオプションのパラメータがあります： meet | slice 。デフォルトの動作は、 meetことがビューボックスの幅または高さのいずれかを満たすまで、x及びy次元の両方でコンテンツを伸ばし。代わりのsliceはコンテンツのアスペクト比を維持しますが、ビューボックスの幅と高さの両方を満たすまで（viewBoxをオーバーフローさせるコンテンツを切り取るまで）グラフィックを拡大します。

これは、 sliceを使用した例です

<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />

次のようにレンダリングされます。

meetを使用した同じ例

    <svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

次のようにレンダリングされます。