Why is there padding around an inline SVG image?

Question

HTML

A strange glitch is happening. If you add a div with padding-top before the svg image, then padding appears to the left and right of the svg image. Moreover, if the images are replaced with png, then there is no indentation. If this div is removed or hidden, then the padding disappears. In Chrome, the glitch disappears (in Firefox it persists) if you insert an empty div without indents between the div and the picture. Also in Chrome, the glitch disappears if the image height is specified not in em, but in px. Why is this happening?
For clarity, I simplified the code as much as possible while preserving the glitch. On a real page, these indents are even larger. To show the dimensions, I added a frame to the image.

<div style="padding-top: 0.6em;">
   Текст2
</div>
<img src="file.svg" style="height:1.651em; vertical-align: -0.528em; border: 1px dotted gray;">.

Result:

<div style="padding-top: 0.6em; display: none;">
    Текст2
</div>
<img src="file.svg" style="height:1.651em; vertical-align: -0.528em; border: 1px dotted gray;">.

Result:

Answer 1

Why do you need svg for greek letter? https://jsfiddle.net/6uy11Lo5/

Answer 2

fill in here https://jsfiddle.net/