Redimensionnement d'arrière-plans SVG

Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :

1. Si background-size définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.
2. Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.
3. Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.
4. Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.

On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.

Avant d'aller plus loin dans l'exploration des résultats avec background-size, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.

Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.

Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.

Fichier SVG source

Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.

Fichier SVG source

Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.

On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.

Fichier SVG source

Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.

Fichier SVG source

Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise background-repeat avec no-repeat pour plus de clarté..

Si on utilise background-size pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.

SVG source : Aucune dimension ni proportion

Avec ces déclarations CSS :

background: url(no-dimensions-or-ratio.svg);
background-size: 125px 175px;

On doit obtenir un résultat semblable à :

SVG source : Une dimension définie et aucune proportion

Avec ces déclarations CSS :

background: url(100px-wide-no-height-or-ratio.svg);
background-size: 250px 150px;

On doit obtenir un résultat semblable à :

SVG source : Une dimension définie et des proportions intrinsèques

Avec ces déclarations CSS :

background: url(100px-height-3x4-ratio.svg);
background-size: 275px 125px;

On doit obtenir un résultat semblable à :

SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques

Avec ces déclarations CSS :

background: url(no-dimensions-1x1-ratio.svg);
background-size: 250px 100px;

On doit obtenir un résultat semblable à :

En utilisant la valeur cover pour background-size, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. contain fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.

Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour cover/contain. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.

SVG source : Aucune dimension ni proportion

Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).

background: url(no-dimensions-or-ratio.svg);
background-size: contain;

Le résultat obtenu sera :

SVG source : Une dimension définie et aucune proportion

De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.

background: url(100px-wide-no-height-or-ratio.svg);
background-size: contain;

Le résultat obtenu sera :

SVG source : Une dimension définie et des proportions intrinsèques

Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de contain ou cover). Ainsi, avec contain, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.

contain

background: url(100px-height-3x4-ratio.svg);
background-size: contain;

Le résultat obtenu sera :

On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.

cover

background: url(100px-height-3x4-ratio.svg);
background-size: cover;

Le résultat obtenu sera :

Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

SVG source : Aucune dimension mais des proportions intrinsèques

On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.

contain

background: url(no-dimensions-1x1-ratio.svg);
background-size: contain;

Le résultat ressemblera à :

On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.

cover

background: url(no-dimensions-1x1-ratio.svg);
background-size: cover;

Le résultat ressemblera à :

Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.

Si background-size vaut auto ou auto auto, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.

SVG source : Aucune dimension ni proportion intrinsèque

Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.

background: url(no-dimensions-or-ratio.svg);
background-size: auto auto;

Voici le résultat obtenu :

SVG source : une dimension mais aucune proportion intrinsèque

S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.

background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto auto;

Voici le résultat obtenu :

Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).

SVG source : une dimension et des proportions intrinsèques

Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.

background: url(100px-height-3x4-ratio.svg);
background-size: auto auto;

Le résultat sera le suivant :

Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec auto.

SVG source : Aucune dimension définie mais des proportions intrinsèques

Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour contain.

background: url(no-dimensions-1x1-ratio.svg);
background-size: auto auto;

Le résultat ressemblera à :

Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.

SVG source : aucune dimension ni proportion intrinsèque

Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour auto.

background: url(no-dimensions-or-ratio.svg);
background-size: auto 140px;

Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).

SVG source : une dimension intrinsèque mais pas de proportion intrinsèque

Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut auto dans le code CSS.

background: url(100px-wide-no-height-or-ratio.svg);
background-size: 200px auto;

Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur auto, l'image fera la même hauteur que la zone pour l'arrière-plan.

background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto 125px;

Ici, c'est la largeur qui vaut auto et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.

SVG source : une dimension définie et des proportions intrinsèques

Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.

background: url(100px-height-3x4-ratio.svg);
background-size: 150px auto;

Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (auto dans la feuille de style).

SVG source : aucune dimension mais des proportions intrinsèques

Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).

background: url(no-dimensions-1x1-ratio.svg);
background-size: 150px auto;

La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.

• background-size
• background-image
• Billet de blog de Jeff Walden : Properly resizing vector image backgrounds (en anglais)