L'attribut viewBox de la balise SVG

Je l'avoue ... je vous ai menti !
Vous avez pu remarquer que pour les pages précédentes de ce tuto et même sur le petit écran d'un smartphone les canevas SVG s'adaptent parfaitement alors qu'officiellement le width de la balise SVG est souvent de 900 pixels !

En fait le code SVG que je vous ai indiqué dans les pages précédentes de ce tuto n'est pas le vrai code !
Ainsi vous avez souvent lu que le code de la balise SVG était par exemple : <svg width = '900' height = '600' ...
Alors qu'en fait le code réel était : < svg width = '100%' height = 'auto' ...viewBox ="0 0 900 600" ...

L'attribut viewBox est incontournable lorsqu'on veut utiliser SVG dans le cadre du "responsive web design" (adaptation correcte de la page sur tous types d'écrans).

Coucher de soleil sur la mer : code erroné

Le code correspondant

... <style> .orange_demi {fill-opacity : 0.5 ; fill : orange ; } ... <body> ... <svg width ="800" height ="400" style ="background :skyblue;" > <defs> <filter id="flou"> <feGaussianBlur stdDeviation="9" /> </filter> </defs> <circle cx="400" cy="200" r="100" class ='orange_demi' filter ="url(#flou)"/> <rect x ='0' y = '200' width = '800' height = '200' fill = 'navy' fill-opacity ="0.7" /> </svg> ...

Quand vous affichez cette page avec votre smartphone le texte apparaît en caractères minuscules (et donc illisible). En effet le navigateur veut afficher tout le canevas SVG et donc il "dézoome" la page. Et si vous zoomez pour rendre le texte lisible le canevas est alors tronqué. Donc ce n'est pas satisfaisant.
Il faut donc exprimer la largeur du canevas SVG en pourcentage de la page (balise BODY).

Coucher de soleil sur la mer : bonne solution

L'image vectorielle s'adapte à la taille de l'écran même à celui d'un smartphone.

Le code correspondant

Il est exactement identique à celui de la première image vectorielle sauf que dans la balise SVG il y a désormais l'attribut viewBox et les valeurs des attributs width et height on été modifiés.

<svg width ="100%" height ="auto" viewBox ="0 0 800 400" ... > ...

Remarque : surtout respectez la casse ; un B majuscule à viewBox !

La largeur de l'image (attribut width) est désormais exprimée en pourcentage ; la valeur de l'attribut height est à "auto".

Donc largeur de l'image vectorielle égale à la largeur de la page.
Largeur de la page (BODY) qui elle-même dépend de la largeur de l'écran : 900px au maximum ou un pourcentage de la largeur de l'écran pour les mobiles.
Les troisième et quatrième valeurs du viewBox correspondent respectivement aux anciennes valeurs des attributs width et height.

Comme les coordonnées des objets SVG ne peuvent plus être calculées par rapport aux valeurs des attributs width et height elles le seront grâce aux valeurs de viewBox qui définit ainsi le système de coordonnées du canevas.

Les deux premières valeurs sont en général égales à zéro !

Le viewBox : autre exemple

Deux canevas SVG de front

Les deux images ne sont jamais rognées mais s'adaptent à la largeur de l'écran (page adaptative).

SVG SVG

Le code de chaque canevas

<svg width="44%" height="auto" viewBox="0 0 150 100" class ="de_front"> <rect x="0" y="0" width="150" height="100" fill="red"/> <circle cx="75" cy="50" r="45" fill="green"/> <text x="75" y="55" font-size="25" text-anchor="middle" fill="white">SVG</text> </svg>

Les deux canevas ont exactement le même code !

Notez le "width" à 44% et les valeurs du viewBox qui créent un ratio de 1.5 entre largeur et hauteur.
Remarquez aussi l'attribut class associé à la balise SVG.

La définition de la classe intitulée "de_front"

	.de_front {display : inline-block ; margin :1% ; vertical-align : top ;}

Ainsi les éléments affectés de cette classe sont des boîtes qui se positionnent côte à côte !
Retour menu