+++ title = "SVG" date = 2020-04-13 tags = ["html"] +++ 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 : ``` html ``` Centrage vertical : ``` html ``` Si on veut qu'il "stretche" sur son conteneur, on peut ajouter l'option `preserveAspectRatio = none` : ``` html ``` # 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é : ``` html ``` 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 ``. 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 `` ; svgContainer est donc vide. ``` html ```