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
Dans les chapitres précédents j'ai déjà évoqué l'attribut viewBox de la balise SVG.
J'ai présenté des 'toiles' SVG tantôt avec cet attribut et tantôt sans.
Mais je n'ai pas justifié l'intérêt de cet attribut.
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).
SVG est un langage sensible à la casse, l'attribut avec 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 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 ="400" height ="400" ...
< svg width ="60%" viewBox ="0 0 400 400" ...
Dans le premier cas la zone de dessin fera toujours 400 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.
Donc ce sont les attributs width & height qui définissent la taille d'affichage de la zone de dessin (et en
aucune façon l'attribut viewBox).
Si l'attribut height est absent (ou valeur ="auto") la hauteur d'affichage est fonction de la valeur de width
et du rapport largeur/hauteur défini par le viewBox.
Donc dans l'exemple ci-dessus la zone de dessin sera toujours un carré puisque le rapport largeur/hauteur est 1.
Dans ce chapitre je vais aussi montrer comment encoder en SVG de façon rapide et efficace.
Il ne faut pas confondre vitesse et précipitation ; pour réaliser une forme complexe la phase d'encodage doit être précédée
d'un croquis sur papier millimétré ou papier avec des petits carreaux.
Ainsi les paramètres géométriques des formes seront déterminées par le croquis.
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 toute la zone de dessin 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 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 les caractéristiques du repère cartésien.
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 dans la page web.
L'image vectorielle s'adapte à la taille de l'écran même à celle d'un smartphone.
Réduisez la largeur de la fenêtre ; la zone de dessin s'adapte à la nouvelle largeur.
Ci-dessous deux canevas SVG de front ; une page web peut contenir plusieurs zones de dessin SVG.
L'image vectorielle s'adapte à la taille de l'écran même à celle d'un smartphone.
Réduisez la largeur de la fenêtre ; les deux canevas s'adaptent à la nouvelle largeur.
Donc le code ci-dessus est répété deux fois.
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 !
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 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 (aucune incidence sur les dimensions d'affichage).