Pour intégrer un fichier SVG et pouvoir le redimensionner, on peut le mettre dans un conteneur HTML. Il va s'arranger pour tout afficher et centrer le résultat , comme ça :
Centrage vertical :
Si on veut qu'il "stretche" sur son conteneur, on peut ajouter l'option
preserveAspectRatio = none :
Position et taille
L'élément SVG a des attributs transitionables, comme svg.width et svg.height,
svg.style.left et svg.style.top. En utilisant le mode position = relative,
on peut déplacer l'élément tout en gardant sa place initiale réservée, comme si
rien n'avait changé :
On peut enfin utiliser le mode position = absolute, où le conteneur est
arraché au flot du document. Il est positionné relativement à son plus proche
parent positionné. La plupart des éléments ont par défaut position = static,
qui la laisse à sa place dans le flot du document. Donc le positionnement se
fait le plus souvent par rapport à l'élément <body>.
Ici l'élément est absolute et son parent direct relative. On remarque que le
span svgContainer a maintenant une hauteur nulle ; en fait en position
absolute, le svg n'est plus contenu dans svgContainer mais dans <body> ;
svgContainer est donc vide.