SVG : attribut viewbox
Redimensionner une image SVG
Problématique
Le SVG est un langage de description d'élément graphique sous forme vectorielle qui permet de conserver une qualité visuelle correcte quelque soient les dimensions dans lesquelles elle est affichée. Si l'on possède une image haute définition ou plus grande que ce qui est utile, il est parfois utile de vouloir la redimensionner.
Solution
Le redimensionnement de l'image se fait grâce à l'attribut viewbox de l'élément svg. Cet élément définit la taille de l'image par les attributs width et height mais aussi les dimensions de l'image affichée par viewbox. Si ces dimensions sont identiques, l'affichage ne sera pas redimensionné. Mais si elles sont différentes, l'image sera modifiée de façon à entrer dans la fenêtre définie par viewbox. Par exemple :
<svg width="45" height="135" viewbox="0 0 90 90">
Remarque
Redimensionner une image pour qu'elle tienne dans les dimensions de viewbox peut amener à déformer l'image affichée. Il est toutefois possible de modifier les contraintes de déformation avec l'attribut preserveAspectRatio de svg. Par exemple :
<svg width="45" height="135" viewbox="0 0 90 90" preserveAspectRatio="xMidYMid Slice">
Permet de conserver les proportions de l'image et, si besoin est, l'image est affichée au centre de la zone d'affichage définie.