viewPort et viewBox
Introduction
Une image SVG est par essence une image en 2 dimensions.
Elle est dessinée sur ce que l'on appelle le SVG canvas.
Cette espace est par définition infini.
Par défaut il occupe toute la place et si notre fenêtre d'application faisait 10km x 10km, il occuperait
cette place.
C'est le viewPort.
Le viewBox sert quant à lui à définir la taille
des objets contenus dans cette espace par rapport à ce viewport.
Cela définit donc l'échelle à laquelle sont représentées ses
éléments.
viewport
En SVG, ce sont les éléments svg, symbol, image et foreignObject qui crée
un viewport.
Le view port n'est pas à proprement parler un attribut de ces éléments ; On ne peut pas les coder
en dur
// non valide <svg viewport="......."> // mais height et width //le définissent ... <svg height="400" width="400">
Svg standalone
Si le notre document Svg est définit seul, c'est à dire non-inscrit dans un autre document (quelconque), le viewport est donc définit par les valeurs données à ces attributs 'hauteur' et 'largeur'(height et width).
The initial viewport is createdby the svg element that is the document element for an SVG document. ....
Le meilleur moyen de s'en rendre comptre est d'ouvrir le simple exemple ci-dessous directement
dans Batik.
En modifiant l'attribut 'height' ou 'width' on modifie la zone d'affichage ... la viewport.
La fenetre s'adapte à ces valeurs
Bon si vous n'avez pas Batik sous la main et c'est un tort , voici 2 captures d'écran : (avec Gimp bien sûr !)
A noter que la largeur est plus importante afin de contenir le tableau de bord.
... on modifie uniquement la hauteur : 50px -> 150px .
Contres exemples : embedded
A partir de l'instant où on affiche ce même graphique dans un navigateur, le SVG
est embarqué ou bien encore embedded.
Le comportement en est totalement modifier :
C. Exemple 1 : fenetre navigateur
On ne modifie en rien le code de la dernière capture d'écran :
<svg version="1.1"
baseProfile='full'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
height='150' width='50'
style='background-color : rgb(230,230,230)'>
</svg>
Exemple : Aperçu d'un graphe SVG directement dans le navigateur :
Le graphique SVG a ici toute la place pour s'exprimer ...
none-standalone viewport
C. Exemple 2 : dans ce fichier Html
Embarqué dans un fichier Html ; le comportement dépend aussi de son environnement direct : les styles appliqués à la page.
<embed src='../../images_svg/standaloneViewport.svg' type='image/svg+xml' pluginspage='http://www.adobe.com/svg/viewer/install/main.html'/>
Aucun ordre de dimension n'est donné dans notre exemple ...
Attribuons donc une certaine hauteur et largeur à la propriété
embed.
Par exemple 100px X 100px et le suivant en un ajoutant un rectangle avec des dimensions
é,gale ` 100%.
Dans le 2ème cas la scroll bar a disparu , et l'image c'est adaptée &agreve; la dimension "normale " (pour rappel dans les 2 cas l'élément Svg à une taille de 100 X 100 ; seule la présence du rectangle change ...
Ce sont des comportements parfois surprenants qu'il faut prendre en compte lors de dévelopement de graphes embarqués et qui peuvent devenir très vite ... énervants, car on n'y pense pas toujours !!!
Mais modifions encore nos SVG de départ en leur attribuant un attribut viewBox, et en premier voyons un certaine définition de ce qu'est une viewBox .
viewBox
... a suivre