preserveAspectRatio

preserveAspectRatio 属性は、指定されたアスペクト比を提供するビューボックスを持つ要素が、異なるアスペクト比を持つビューポートにどのように収まるべきかを示します。

SVG 画像のアスペクト比は viewBox 属性によって定義されるので、この属性が設定されていない場合、 preserveAspectRatio 属性は何の効果も持ちません（後述する <image> 要素は例外です）。

例

meet (width > height)

この例では、要素の width が height よりも大きい場合に meet を使用することを示しています。 3 つの配置値 xMidYMid、xMinYMid、xMaxYMid で 3 つのバリエーションを表示します。

html,
body,
svg {
  height: 100%;
}

/* それぞれの iframe の本文に flex 要素を配置し、様々な画面サイズに対応できるようにした */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 202 40" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
</svg>

html

<rect x="0" y="0" width="60" height="30">
  <title>xMidYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMid meet"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

html

<rect x="70" y="0" width="60" height="30">
  <title>xMinYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMinYMid meet"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>

html

  <rect x="140" y="0" width="60" height="30">
    <title>xMaxYMid meet</title>
  </rect>
  <svg
    viewBox="0 0 100 100"
    width="60"
    height="30"
    preserveAspectRatio="xMaxYMid meet"
    x="140"
    y="0">
    <use href="#smiley" />
  </svg>
</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

slice (width > height)

この例では、要素の width が height よりも大きい場合に slice を使用することを示しています。 3 種類の配置値 xMidYMin、xMidYMid、xMidYMax で 3 つのバリエーションを表示します。

html,
body,
svg {
  height: 100%;
}

/* それぞれの iframe の本文に flex 要素を配置し、様々な画面サイズに対応できるようにした */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 202 57" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
</svg>

html

<rect x="0" y="15" width="60" height="30">
  <title>xMidYMin slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMin slice"
  x="0"
  y="15">
  <use href="#smiley" />
</svg>

html

<rect x="70" y="15" width="60" height="30">
  <title>xMidYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMid slice"
  x="70"
  y="15">
  <use href="#smiley" />
</svg>

html

  <rect x="140" y="15" width="60" height="30">
    <title>xMidYMax slice</title>
  </rect>
  <svg
    viewBox="0 0 100 100"
    width="60"
    height="30"
    preserveAspectRatio="xMidYMax slice"
    x="140"
    y="15">
    <use href="#smiley" />
  </svg>
</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

meet (height > width)

この例では、要素の height が width よりも大きい場合に meet を使用することを示しています。 3 種類の配置値 xMidYMin、xMidYMid、xMidYMax で 3 つのバリエーションを表示します。

html,
body,
svg {
  height: 100%;
}

/* それぞれの iframe の本文に flex 要素を配置し、様々な画面サイズに対応できるようにした */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
</svg>

html

  <rect x=0" y="0" width="30" height="75">
    <title>xMidYMin meet</title>
  </rect>
  <svg
    viewBox="0 0 100 100"
    width="30"
    height="75"
    preserveAspectRatio="xMidYMin meet"
    x="0"
    y="0">
    <use href="#smiley" />
  </svg>

html

<rect x="35" y="0" width="30" height="75">
  <title>xMidYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMid meet"
  x="35"
  y="0">
  <use href="#smiley" />
</svg>

html

  <rect x="70" y="0" width="30" height="75">
    <title>xMidYMax meet</title>
  </rect>
  <svg
    viewBox="0 0 100 100"
    width="30"
    height="75"
    preserveAspectRatio="xMidYMax meet"
    x="70"
    y="0">
    <use href="#smiley" />
  </svg>
</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

slice (height > width)

この例では、要素の height が width よりも大きい場合に slice を使用することを示しています。 3 種類の配置値 xMinYMid、xMidYMid、xMaxYMid で 3 つのバリエーションを表示します。

html,
body,
svg {
  height: 100%;
}

/* それぞれの iframe の本文に flex 要素を配置し、様々な画面サイズに対応できるようにした */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
</svg>

html

<rect x="0" y="0" width="30" height="75">
  <title>xMinYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMinYMid slice"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>

html

<rect x="35" y="0" width="30" height="75">
  <title>xMidYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMid slice"
  x="35"
  y="0">
  <use href="#smiley" />
</svg>

html

  <rect x="70" y="0" width="30" height="75">
    <title>xMaxYMid slice</title>
  </rect>
  <svg
    viewBox="0 0 100 100"
    width="30"
    height="75"
    preserveAspectRatio="xMaxYMid slice"
    x="70"
    y="0">
    <use href="#smiley" />
  </svg>
</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

none

この例では配置値を none に設定した要素を表示させています。

html,
body,
svg {
  height: 100%;
}

/* それぞれの iframe の本文に flex 要素を配置し、様々な画面サイズに対応できるようにした */
body {
  display: flex;
}

html

<svg viewBox="-1 -1 192 62" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
</svg>

html

  <!-- none -->
  <rect x="0" y="0" width="160" height="60">
    <title>none</title>
  </rect>
  <svg
    viewBox="0 0 100 100"
    width="160"
    height="60"
    preserveAspectRatio="none"
    x="0"
    y="0">
    <use href="#smiley" />
  </svg>
</svg>

css

path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

構文

preserveAspectRatio="<align> [<meetOrSlice>]"

その値は、 1 つまたは 2 つのキーワードで構成されます。必要な配置値と、下記で記述されているオプションの "meet または slice" の参照です。

配置値

配置値は、均等な変倍を強制するかどうかを示し、もしそうなら、viewBoxの縦横比がビューポートの縦横比と一致しない場合に使用する配置方法を示します。配置値は以下のいずれかのキーワードでなければなりません。

none 均等な変倍を強制しません。指定された要素のグラフィックコンテンツを、要素の外接ボックスがビューポートの長方形に正確に一致するように、必要に応じて不均一に変倍します。 もし <align> が none ならば、オプションの <meetOrSlice> の値は無視されることに注意してください。
xMinYMin - 均等な変倍を強制します。要素の viewBox の <min-x> をビューポートの最小 X 値に配置します。要素の viewBox の <min-y> をビューポートの最小 Y 値に配置します。
xMidYMin - 均等な変倍を強制します。要素の viewBox の X の中央値をビューポートの X の中央値に配置します。要素の viewBox の <min-y> をビューポートの最小 Y 値に配置します。
xMaxYMin - 均等な変倍を強制します。要素の viewBox の <min-x>+<width> をビューポートの最大 X 値に配置します。要素の viewBox の <min-y> をビューポートの最小 Y 値に配置します。
xMinYMid - 均等な変倍を強制します。要素の viewBox の <min-x> をビューポートの最小 X 値に配置します。要素の viewBox の Y の中央値をビューポートの Y の中央値に配置します。
xMidYMid (the default) - 均等な変倍を強制します。要素の viewBox の X の中央値をビューポートの X の中央値に配置します。要素の viewBox の Y の中央値をビューポートの Y の中央値に配置します。
xMaxYMid - 均等な変倍を強制します。要素の viewBox の <min-x>+<width> をビューポートの最大 X 値に配置します。要素の viewBox の Y の中央値をビューポートの Y の中央値に配置します。
xMinYMax - 均等な変倍を強制します。要素の viewBox の <min-x> をビューポートの最小 X 値に配置します。要素の viewBox の <min-y>+<height> をビューポートの最大 Y 値に配置します。
xMidYMax - 均等な変倍を強制します。要素の viewBox の X の中央値をビューポートの X の中央値に配置します。要素の viewBox の <min-y>+<height> をビューポートの最大 Y 値に配置します。
xMaxYMax - 均等な変倍を強制します。要素の viewBox の <min-x>+<width> をビューポートの最大 X 値に配置します。要素の viewBox の <min-y>+<height> をビューポートの最大 Y 値に配置します。

meet または slice の参照

meetまたはslice参照はオプションで、指定された場合は以下のキーワードのいずれかでなければなりません：

meet (the default) - 次のようにグラフィックを変倍します。
- アスペクト比を維持されます。
- viewBox 全体がビューポート内に表示されます。
- viewBox は、他にも条件を満たしつつ、可能な限り拡大します。
この場合、グラフィックのアスペクト比がビューポートと一致しないと、ビューポートの一部が viewBox の枠からはみ出してしまいます（つまり、viewBox が描画する領域はビューポートよりも小さくなります）。
slice - 次のようにグラフィックを変倍します。
- アスペクト比を維持されます。
- ビューポート全体が viewBox に応じたものになります。
- viewBox は、他にも条件を満たしつつ、可能な限り縮小します。
この場合、 viewBox のアスペクト比がビューポートと一致しないと、viewBox の一部がビューポートの境界からはみ出してしまいます（つまり、viewBox が描画する領域はビューポートよりも大きくなります）。

要素

この属性は以下の SVG 要素で使用することができます。

feImage

<feImage> (en-US) の場合、 preserveAspectRatio は参照している画像が <feImage> 要素で定義した長方形に収まるように定義します。

値	<align> <meetOrSlice>?
既定値	`xMidYMid` `meet`
アニメーション	可

image

<image> の場合、 preserveAspectRatio は参照している画像が <feImage> 要素で定義した長方形に収まるように定義します。

値	<align> <meetOrSlice>?
既定値	`xMidYMid` `meet`
アニメーション	可

marker

<marker> (en-US) の場合、 preserveAspectRatio は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。

値	<align> <meetOrSlice>?
既定値	`xMidYMid` `meet`
アニメーション	可

pattern

<pattern> の場合、 preserveAspectRatio は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。

値	<align> <meetOrSlice>?
既定値	`xMidYMid` `meet`
アニメーション	可

svg

<svg> の場合、 preserveAspectRatio は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。

値	<align> <meetOrSlice>?
既定値	`xMidYMid` `meet`
アニメーション	可

symbol

<symbol> (en-US) の場合、 preserveAspectRatio は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。

値	<align> <meetOrSlice>?
既定値	`xMidYMid` `meet`
アニメーション	可

view

<view> (en-US) の場合、 preserveAspectRatio は、要素のビューポートに合わせて一様に変倍する必要があるかどうかを示します。

値	<align> <meetOrSlice>?
既定値	`xMidYMid` `meet`
アニメーション	可

仕様書

Specification
Filter Effects Module Level 1 # element-attrdef-feimage-preserveaspectratio
Scalable Vector Graphics (SVG) 2 # PreserveAspectRatioAttribute