preserveAspectRatio
===================

L'attribut **`preserveAspectRatio`** indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur de la `viewBox` est différent du ratio de la zone d'affichage (défini par les attributs `width` et `height`).

Parce que les proportions du SVG sont définies par l'attribut `viewBox`, si ce dernier n'est pas défini alors l'attribut `preserveAspectRatio` n'a aucun effet (*à l'exception près de l'élément `<image>` comme décrit ci-dessous*).

Exemple
-------


```html
<svg viewBox="-1 -1 162 92" 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>

  <!-- (largeur>hauteur) meet -->
  <rect x="0" y="0" width="20" height="10">
    <title>xMidYMid meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMidYMid meet"
 x="0"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="25" y="0" width="20" height="10">
    <title>xMinYMid meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMinYMid meet"
 x="25"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="50" y="0" width="20" height="10">
    <title>xMaxYMid meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMaxYMid meet"
 x="50"
 y="0">
    <use href="#smiley" />
  </svg>

  <!-- (largeur>hauteur) slice -->
  <rect x="0" y="15" width="20" height="10">
    <title>xMidYMin slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMidYMin slice"
 x="0"
 y="15">
    <use href="#smiley" />
  </svg>

  <rect x="25" y="15" width="20" height="10">
    <title>xMidYMid slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMidYMid slice"
 x="25"
 y="15">
    <use href="#smiley" />
  </svg>

  <rect x="50" y="15" width="20" height="10">
    <title>xMidYMax slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="20"
 height="10"
 preserveAspectRatio="xMidYMax slice"
 x="50"
 y="15">
    <use href="#smiley" />
  </svg>

  <!-- (largeur<hauteur) meet -->
  <rect x="75" y="0" width="10" height="25">
    <title>xMidYMin meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMidYMin meet"
 x="75"
 y="0">
    <use href="#smiley" />
  </svg>

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

  <rect x="105" y="0" width="10" height="25">
    <title>xMidYMax meet</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMidYMax meet"
 x="105"
 y="0">
    <use href="#smiley" />
  </svg>

  <!-- (largeur<hauteur) slice -->
  <rect x="120" y="0" width="10" height="25">
    <title>xMinYMid slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMinYMid slice"
 x="120"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="135" y="0" width="10" height="25">
    <title>xMidYMid slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMidYMid slice"
 x="135"
 y="0">
    <use href="#smiley" />
  </svg>

  <rect x="150" y="0" width="10" height="25">
    <title>xMaxYMid slice</title>
  </rect>
  <svg
 viewBox="0 0 100 100"
 width="10"
 height="25"
 preserveAspectRatio="xMaxYMid slice"
 x="150"
 y="0">
    <use href="#smiley" />
  </svg>

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


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

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;
}
```

Syntaxe
-------
```

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


La valeur de l'attribut est constituée d'un ou deux mots clés : l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous:

Alignement

L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur de la `viewBox` ne correspond pas à celui affiché. Les différentes valeurs possibles sont:

* **none**
 Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. *Notez que si* `<align>` *vaut* `none`*, alors la valeur* `<meetOrSlice>` *est ignorée*.
* **xMinYMin** - Force la mise à l'échelle uniforme.
 Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
 Aligne le côté haut de l'élément en haut de la zone d'affichage.
* **xMidYMin** - Force la mise à l'échelle uniforme.
 Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
 Aligne le côté haut de l'élément en haut de la zone d'affichage.
* **xMaxYMin** - Force la mise à l'échelle uniforme.
 Aligne le côté droit de l'élément à droite de la zone d'affichage.
 Aligne le côté haut de l'élément en haut de la zone d'affichage.
* **xMinYMid** - Force la mise à l'échelle uniforme.
 Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
 Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
* **xMidYMid** (*par défaut*) - Force la mise à l'échelle uniforme.
 Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
 Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
* **xMaxYMid** - Force la mise à l'échelle uniforme.
 Aligne le côté droit de l'élément à droite de la zone d'affichage.
 Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.
* **xMinYMax** - Force la mise à l'échelle uniforme.
 Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
 Aligne le côté bas de l'élément en bas de la zone d'affichage.
* **xMidYMax** - Force la mise à l'échelle uniforme.
 Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
 Aligne le côté bas de l'élément en bas de la zone d'affichage.
* **xMaxYMax** - Force la mise à l'échelle uniforme.
 Aligne le côté droit de l'élément à droite de la zone d'affichage.
 Aligne le côté bas de l'élément en bas de la zone d'affichage.

Meet ou slice

La valeur *meet* ou *slice* est optionnelle. Les deux valeurs possibles sont:

* **meet** (*par défaut*) - Mettre à l'échelle l'image tel que:
    + les proportions sont préservées
    + la `viewBox` est entièrement visible dans la zone d'affichage
    + la `viewBox` est agrandie autant que possible, tout en respectant les autres critèresAutrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà de la `viewBox` (la zone dans laquelle sera dessinée la `viewBox` sera plus petite que la zone d'affichage).
* **slice** - Mettre à l'échelle l'image tel que:
    + les proportions sont préservées
    + la zone d'affichage est entièrement remplie par la `viewBox`
    + la `viewBox` est réduite autant que possible, tout en respectant les autres critèresAutrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la `viewBox` sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la `viewBox` sera plus grande que la zone d'affichage).

Éléments
--------

Sept éléments utilisent cet attribut: `<svg>`, `<symbol>`, `<image>`, `<feImage>`, `<marker>`, `<pattern>`, and `<view>` (en-US).

### feImage

Pour `<feImage>`, `preserveAspectRatio` définit comment l'image doit être ajustée dans le rectangle défini par l'élément `<feImage>`.

|  |  |
| --- | --- |
| Valeur | **<align> <meetOrSlice>?** |
| Valeur par défaut | `xMidYMid` `meet` |
| Animation | Oui |

### image

Pour `<feImage>`, `preserveAspectRatio` définit comment l'image doit être ajustée dans le rectangle défini par l'élément `<image>`.

|  |  |
| --- | --- |
| Valeur | **<align> <meetOrSlice>?** |
| Valeur par défaut | `xMidYMid` `meet` |
| Animation | Oui |

### marker

Pour `<marker>`, `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

|  |  |
| --- | --- |
| Valeur | **<align> <meetOrSlice>?** |
| Valeur par défaut | `xMidYMid` `meet` |
| Animation | Oui |

### pattern

Pour `<pattern>`, `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

|  |  |
| --- | --- |
| Valeur | **<align> <meetOrSlice>?** |
| Valeur par défaut | `xMidYMid` `meet` |
| Animation | Oui |

### svg

Pour `<svg>`, `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

|  |  |
| --- | --- |
| Valeur | **<align> <meetOrSlice>?** |
| Valeur par défaut | `xMidYMid` `meet` |
| Animation | Oui |

### symbol

Pour `<symbol>`, `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

|  |  |
| --- | --- |
| Valeur | **<align> <meetOrSlice>?** |
| Valeur par défaut | `xMidYMid` `meet` |
| Animation | Oui |

### view

Pour `<view>` (en-US), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

|  |  |
| --- | --- |
| Valeur | **<align> <meetOrSlice>?** |
| Valeur par défaut | `xMidYMid` `meet` |
| Animation | Oui |

Spécifications
--------------

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