SVG viewport et viewBox.

Généralités.

Pour rappel, le 'viewport' détermine la surface d'affichage dans la page (la partie visible en somme) que pourra occuper le fichier SVG, par le biais de 'width' et 'height', indépendamment de la taille réelle du SVG ou de son ratio. Grosso modo, on peut tout fait déterminer une surface d'affichage mode paysage, alors que le SVG est en mode portrait, ou bien une surface d'affichage en 16/9 avec un SVG au ratio 4/3. Le premier couple de valeur du 'viewBox', détermine le point de départ de son affichage dans le 'viewport', 0 0 indiquant le coin supérieur gauche dans le 'viewport', mais il est tout à fait possible d'utiliser d'autre valeurs, qui peuvent être positives ou négatives, pour débuter son affichage ailleurs dans le 'viewport'. Le couple suivant de valeurs détermine son ratio.

La taille du viewport se détermine via les attributs width et height dans le document SVG. Si ces valeurs sont exprimées par un nombre sans unité, les pixels seront utilisés comme valeur par défaut. Les unités qui peuvent être utilisées sont: px (96 pixels/inch), pt (1/72 d'inch), pc (1/6 d'inch), cm (centimètre), mm (millimètres), in (inches), ex (la hauteur de la lettre x), em (la taille de la police par défaut).

Les coordonnées du viewport sont calculées à partir du coin supérieur gauche (X0 Y0), le point d'origine, au coin inférieur droit (X100 Y100). Si des valeurs autres que les pixels sont utilisés, les coordonnées des points sont alors converties dans cette valeur. En 'in', 96px/inch , le point situé à '192px 192px' sera converti en '2in 2in'. Le changement de taille via width et height ne change pas l'échelle du contenu du SVG, seulement la surface visible. Par exemple, si une phrase est plus longue que les dimensions du viewport, elle apparaîtra tronquée.

Le viewBox, lui est déterminé par l'unité de valeur (px, in etc) utilisée pour le SVG indépendamment des dimensions du viewport, ainsi que son aspect ratio (son échelle). Les quatre valeurs numériques sont séparées par des espaces, les deux premières indiquent l'aspect ratio minimum (min-x, min-y) et les deux suivantes l'aspect ratio que prendra le viewport (width, height). Dans l'exemple ci-dessous, le ratio est de 1:1. On peut écrire indifféremment "0 0 100 100" ou bien "0,0 100,100". Les deux premiers chiffres sont des coordonnées et peuvent donc avoir des valeurs négatives, par contre les deux derniers étant des longueurs, ils ne peuvent être que positifs. Par exemple: "-100 -100 200 200".

Des éléments peuvent être placés hors de la surface de la viewBox est n’apparaîtront pas, ce n'est pas pour autant qu'ils n'existent pas. Ainsi, un élément peut être invisible ou bien apparaître tronqué, pour obliger l'affichage à l'écran de ses éléments, il suffit d'appliquer par le biais d'une CSS l’attribut overflow: visible.

Attention ! Firefox affiche 'correctement' un SVG même si le viewport a été omis, absence des attributs width et height. Par contre Midori affichera par défaut une height de 100%, c'est à dire tout l'écran.

<svg width="100px" height="100px" viewBox="0 0 100 100">
....
</svg>
								

Exemple sans overflow.

<svg width="400px" height="120px" viewBox="0 0 400 120">
	<rect x="380" y="100" width="50" height="70" 
		style="fill: none; stroke-width: 5; stroke: #170BF5;" />
</svg>
								

Exemple avec overflow.

<svg id="aff" width="400px" height="120px" viewBox="0 0 400 120">
	<style type="text/css">
		svg#aff{
		display: block;
		margin: 0 auto; 
		overflow: visible;
		border: solid 2px #5BB728;
		background-color: #D4D5E3;
		margin-bottom: 70px;
		}
   </style>
	<rect x="380" y="100" width="50" height="70" 
		style="fill: none; stroke-width: 5; stroke: #170BF5;" />
</svg>
								

Le code est identique aux deux exemples, seule la directive overflow à été modifiée et aussi le margin-bottom ;) Attention ! A la direction de l'axe des Y qui va vers le bas (+) et non le haut (-) à l'inverse des coordonnées cartésiennes !


Dans le détail.

A partir de l'exemple ci-dessous nous allons jouer avec les valeurs du viewBox. Nous partons donc d'un cercle centré dans un rectangle où le viewport et égal au viewbox..

<svg  width="400px" height="120px" viewBox="0 0 400 120">
	<circle cx="200" cy="60" r="40" style="fill: #FDCEF3; stroke: #D16DBA;" />
</svg>
								

Dans un premier temps, nous ométons les valeurs cx et cy et ça nous donne (ex02):

Maintenant revenons sur les valeurs du viewBox en remettant le cx et cy pour centrer le disque.

Nous multiplions la valeur du viewBox par deux par rapport au viewport, ce qui nous donne un cercle deux fois plus petit et décentré:

<svg  width="400px" height="120px" viewBox="0 0 800 240">
	<circle cx="200" cy="60" r="40" style="fill: #FDCEF3; stroke: #D16DBA;" />
</svg>
								

Cette fois, nous divisons la valeur du viewBox par deux par rapport au viewport, ce qui nous donne un cercle deux fois plus grand:

<svg  width="400px" height="120px" viewBox="0 0 200 60">
	<circle cx="200" cy="60" r="40" style="fill: #FDCEF3; stroke: #D16DBA;" />
</svg>
								

En conclusion, les deux dernières valeurs du viewBox jouent sur l'échelle du contenu du SVG. Et maintenant, voyons les deux premières.

<svg  width="400px" height="120px" viewBox="-200 -60 400 120">
	<circle  r="40" style="fill: #FDCEF3; stroke: #D16DBA;" />
</svg>
								

Sans cx et cy, l'ajustement peut se faire via le viewBox, sinons nous aurions un quart de cercle comme dans 'ex02' ci-dessus. Les deux premières valeurs du viewBox détermine la position comme suit: viewBox = <min-x> <min-y> <width> et <height>.

Revoir le viewBox sur la cascade !!!


Articles connexes:

Unités de mesures (CSS).[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 22/10/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11