A
To the symbol f No change in size, CSS rule should be used https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box : fill-box The transform-box CSS property defines the layout box to which the
transform and transform-origin properties relate.This rule is very useful, as it removes the search and direction of the centre of the transformable figure, as in scale and other transformations, for example: rotation.Find a SVG mortgage. Facebook code fragment, which is responsible for the removal of the symbol F Use his class and use CSS rule. transform-box:fill-box; Below the symbol size code f reduced by 20 per cent .facebook {
transform-box: fill-box;
transform-origin: center center;
transform: scale(0.8);
} <svg version="1.1" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 291.319 291.319" style="enable-background:new 0 0 291.319 291.319;" xml:space="preserve">
<g>
<path style="fill:#3B5998;" d="M145.659,0c80.45,0,145.66,65.219,145.66,145.66c0,80.45-65.21,145.659-145.66,145.659
S0,226.109,0,145.66C0,65.219,65.21,0,145.659,0z" />
</g>
<g>
<path class="facebook" style="fill:#fff;" d="M163.394,100.277h18.772v-27.73h-22.067v0.1c-26.738,0.947-32.218,15.977-32.701,31.763h-0.055
v13.847h-18.207v27.156h18.207v72.793h27.439v-72.793h22.477l4.342-27.156h-26.81v-8.366
C154.791,104.556,158.341,100.277,163.394,100.277z" />
</g>
</svg>To show that the symbol f does not lose a central position when the size is reduced, the code is down. JS + SVGvar svg1 = document.getElementById("svg1"),
scale = document.getElementById('an_scale'),
reduce = document.getElementById('an_reduce');
svg1.addEventListener('mouseover', () => {
scale.beginElement();
});
svg1.addEventListener('mouseleave', () => {
reduce.beginElement();
});.facebook {
transform-box: fill-box;
transform-origin: center center;
fill:#fff;
}<svg id="svg1" version="1.1" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 291.319 291.319" style="enable-background:new 0 0 291.319 291.319;" xml:space="preserve">
<path style="fill:#3B5998;" d="M145.659,0c80.45,0,145.66,65.219,145.66,145.66c0,80.45-65.21,145.659-145.66,145.659
S0,226.109,0,145.66C0,65.219,65.21,0,145.659,0z" />
<path class="facebook" transform="scale(0.8)" d="M163.394,100.277h18.772v-27.73h-22.067v0.1c-26.738,0.947-32.218,15.977-32.701,31.763h-0.055
v13.847h-18.207v27.156h18.207v72.793h27.439v-72.793h22.477l4.342-27.156h-26.81v-8.366
C154.791,104.556,158.341,100.277,163.394,100.277z" >
<!-- анимация увеличения символа `F` при наведении -->
<animateTransform id="an_scale"
attributeName="transform"
type="scale"
begin="indefinite"
dur="0.4s"
values="0.8;1.5"
fill="freeze"/>
<!-- анимация уменьшенич символа `F` при уходе курсора -->
<animateTransform id="an_reduce"
attributeName="transform"
type="scale"
begin="indefinite"
dur="0.4s"
values="1.5;0.8"
fill="freeze"/>
</path>
</svg> </code></pre></div></div></p>