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
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
J'ai mentionné cet attribut dans un chapitre précédent mais sans vraiment expliquer son intérêt.
J'avoue que parfois je vous ai menti. Ainsi dans le code SVG interne j'indique que le contenu de la balise SVG est : <svg width = '900' height = '600' ...
Alors qu'en fait le vrai code de la balise SVG début c'est : < svg width = '90%' viewBox ="0 0 900 600" ...
Pour que le canevas soit 'responsive' c'est à dire s'affiche proprement sur tous les écrans il ne faut surtout pas donner à l'attribut
width une valeur en pixels. Sur un écran de smartphone en mode "portrait" il n'y a pas 900 pixels de large mais beaucoup moins !
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).
Si vous affichiez cette page avec votre smartphone, 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 alors, pour rendre le texte lisible, l'image 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 et non plus en pixels.
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.
Quant à l'attribut height il devient facultatif (vous pouvez aussi règler sa valeur à "auto").
Comme les coordonnées (taille et position) 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 système de coordonnées de la zone de dessin.
Donc résumons nous, les quatre valeurs de l'attribut viewBox servent à positionner et dimensionner les formes dans le canevas SVG alors que l'attribut width affiche de façon "responsive" la zone de dessin.
L'image vectorielle s'adapte à la taille de l'écran même à celle d'un smartphone.
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).
Notez le "width" à 44% et les valeurs du viewBox qui créent un ratio de 1.5 entre largeur et hauteur.
Notez 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 HTML affectés de cette classe sont des boites qui se positionnent côte à côte !
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.
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 :
A partir du croquis l'encodage devient très rapide et fiable.
Si vous voulez agrandir ce canevas dans la page web, augmentez la valeur en % de l'attribut width mais surtout, ne modifiez pas les valeurs du viewBow puisque toutes les coordonnées sont basée sur un repère 200 par 200.