L'attibut 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éfinit 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

topExample

html,body,svg { height:100% }

<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>

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

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:

Éléments

feImage

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

image

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

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

marker

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

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

pattern

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

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

svg

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

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

symbol

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

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

view

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

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

Spécification	Statut	Commentaire
{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}	{{Spec2('Filters 1.0')}}
{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}	{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}	{{Spec2("SVG1.1")}}	Définition initiale