Accueil

Traduction

Dessiner avec SVG - sommaire

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Un attribut incontournable de la balise SVG : viewBox

Dans les chapitres précédents j'ai déjà évoqué l'attribut viewBox de l'élément SVG. J'ai présenté des canevas SVG tantôt avec cet attribut et tantôt sans.
Je vais vous montrer dans ce chapitre qu'il faut mieux l'utiliser de façon systématique.

Des zones de dessin SVG 'responsives'

L'attribut viewBox de la balise SVG est incontournable lorsqu'on veut que l'image vectorielle soit "responsive" c'est à dire s'affiche proprement sur tous types de terminaux web (de l'écran de PC de bureau au smartphone).
Le viewBox permet aussi de modifier l'origine du canevas (par défaut son coin haut gauche).
SVG est un langage sensible à la casse, l'attribut doit comprendre un B majuscule, pour être reconnu.

Vous avez constaté dans le chapitre "formes de base" que si l'attribut viewBox est présent l'attribut width est alors exprimé en % et si l'attribut viewBox est absent alors les attributs width & heigth sont exprimés alors en pixels (de façon implicite).

N'en concluez pas pour autant que les deux syntaxes ci-dessous sont équivalentes :
< svg width ="800" height ="400" ...
< svg width ="60%" viewBox ="0 0 800 400" ...

Dans le premier cas la zone de dessin sera toujours affichée avec 800 pixels de large (ce qui est génant sur un smartphone).

Dans le deuxième cas la zone de dessin aura pour largeur 60% de celle de son conteneur (souvent l'élément BODY).
Toujours dans ce deuxième cas ce sont les valeurs du viewBox qui définissent les dimensions et positions des objets dans le canevas.
Exemple :

Le code correspondant :

L'attribut width est exprimé en %, l'attribut viewBox est présent, l'attribut height a disparu.
En effet height devient inutile, compte tenu des dernières valeurs du viewBox, le canevas sera toujours affiché deux fois plus large que haut.

Pourquoi utiliser systématiquement l'attribut viewBox ?

Thème : coucher de soleil.

Mauvaise solution

Le rendu

Réduisez la largeur de la fenêtre pour simuler un petit écran. Le canevas est alors rogné !

Le code correspondant

Je n'utilise pas l'attribut viewBox, les attributs width et height sont exprimés en pixels.

Définition de la classe "orange_demi" :

	.orange_demi {fill-opacity : 0.5 ; fill : orange ;  }

Sur un écran d'ordinateur cette solution est satisfaisante (l'écran fait plus de 1600 pixels de large) mais sur un smartphone le texte apparait en caractères minuscules (et est donc illisible). En effet le navigateur veut afficher tout le canevas SVG et donc il "dézoome" la page.
Et si vous zoomez alors, pour rendre le texte lisible, l'image est alors rognée.
Donc tout cela n'est guère satisfaisant.

La bonne solution

Le rendu

Réduisez la largeur de la fenêtre pour simuler un petit écran ; la largeur du canevas s'adapte à celle de la fenêtre ; les paramètres des objets s'adaptent à la nouvelle largeur du canevas.

Le code

J'utilise l'attribut viewBox et la valeur de width est un pourcentage !

Il y a désormais dans la balise SVG début, l'attribut viewBox et la valeur de l'attribut width est désormais un pourcentage.
Les coordonnées de position et de taille des objets seront calculées par rapport aux valeurs du viewBox qui définit donc les caractéristiques du repère cartésien.
Quant à la valeur de l'attribut height règlez à "auto" OU ne mentionnez pas cet attribut ; la hauteur du canevas sera toujours égale à la moitié de la largeur compte tenu des deux dernières valeurs du viewBox.

Les valeurs de l'attribut viewBox

Si point X mini et point Y mini valent zéro cela signifie que l'origine du canevas est son coin haut gauche.
Mais vous pouvez souhaiter que l'origine du canevas soit son centre ; les deux premières valeurs du viewBox sont alors négatives ; voir la fin du chapitre !

Avant de coder

Le concept de viewBox facilite l'encodage.
J'ai imaginé un canevas SVG dont la valeur du viewBox sera "0 0 200 200"
Ce canevas doit contenir : un hexagone et une étoile à 6 branches ; deux formes qui s'inscrivent parfaitement dans un cercle.

Le schéma préalable

J'ai réalisé un schéma sur papier à petits carreaux qui me donne en lecture directe les coordonnées des points des deux chemins : un cm = 20px.

Ci-dessous le croquis :

Le code

À partir du croquis l'encodage devient très rapide et fiable puisque la lecture du croquis indique les paramètres géométriques des objets.

Le rendu

Si vous voulez agrandir cette zone de dessin dans la page web, il suffit d'augmenter la valeur en % de l'attribut width mais surtout, ne modifiez pas les valeurs du viewBox.

Changer l'origine du canevas grâce au viewBox

Ne pensez pas que les deux premières valeurs de l'attribut viewBox sont toujours égales à 0 0.
Si vous voulez que l'origine du canevas SVG ne soit plus son coin haut gauche mais son centre, il suffit que les deux premières valeurs du viewBox soient négatives.

Exemple

Le repère orthonormé un carre un rond

Les paramètres du carré rouge sont X = 0 ; Y = 0 ; W =50 ; H = 50 et pourtant le carré se positionne au centre du canevas (et non pas dans le coin haut gauche) ...

Les paramètres du rond bleu sont CX = 0 ; CY =0 ; R =50 ; il se positionne au centre du canevas !
En effet l'origine de ce canevas n'est plus son coin haut gauche mais son centre !!!

Le code SVG