Dessiner avec SVG - sommaire

Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

SVG : l'attribut viewBox

Je l'avoue ... je vous ai menti jusqu'à présent. 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 zones de dessin SVG s'adaptent parfaitement à l'écran alors qu'officiellement elles font le plus souvent 900 pixels de large. Or sur un écran de smartphone vous n'avez jamais 900 pixels de large (et sur une tablette uniquement en mode "paysage").

En fait le code SVG interne que je vous ai indiqué pour certains exemples précédents n'est pas tout à fait 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 = '60%' height = 'auto' ...viewBox ="0 0 900 600" ...

L'attribut viewBox de la balise SVG est incontournable lorsqu'on veut que l'image vectorielle dessinée directement dans la page (code SVG interne) soit adaptative c'est à dire s'affiche correctement sur tous types d'écrans (de l'écran de PC de bureau au smartphone).

Exemple : coucher de soleil

Code erroné

Si vous affichiez avec votre smartphone une page contenant ce code, le texte apparaitrait en caractères minuscules (et serait 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 c'est alors l'image vectorielle qui est rognée. Donc tout cela n'est guère satisfaisant. Il faut donc exprimer la largeur de la zone de dessin SVG dans la page en pourcentage de son conteneur (et non plus en pixels).

Bonne solution

Essayez avec votre smartphone ou sur votre tablette.

Le rendu

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

Le code correspondant

Il est exactement identique à celui proposé plus haut 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.
Le code de la balise SVG est alors :

Comme les coordonnées des formes ne peuvent plus être calculées par rapport aux valeurs des attributs width & height, elles le seront grâce aux valeurs du viewBox qui définit donc le nouveau système de coordonnées du canevas SVG.
Donc résumons nous ! Les quatre valeurs de l'attribut viewBox servent à positionner et dimensionner les formes dans le canevas SVG alors que les attributs width & height de la balise SVG précisent désormais l'affichage de l'image dans la page.

L’attribut viewBox contient quatre valeurs (sans unité):
• le point x minimum (zéro en général)
• le point y minimum (zéro en général)
• la largeur (ancienne valeur de "width")
• la hauteur (ancienne valeur de "height")

Le viewBox : autre exemple

Ci-dessous deux canevas SVG de front

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

Le code SVG de chaque canevas

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.

Extrait de la feuille de style de la page

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

Ainsi les éléments affectés de cette classe sont des boites qui se positionnent côte à côte !