Emoji, text and images alignment

How do we make a square svg image the same size and alignment as an emoji?

by ubershmekel

HTML

<section>
<p class="ima">
  ABC<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>DEFG
</p>
<p>
  🔇😊K▶️<svg xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="0 0 87.312 87.312"><g fill="none" stroke="#fff" stroke-width="15.875"><path d="M34.396 79.375H7.937V52.917M52.917 79.375h26.458V52.917M34.396 7.938H7.937v26.458M52.917 7.938h26.458v26.458"/></g></svg>🔇😊K▶️
</p>
<h1>
Emoji, image and size tests
</h1>
<p>
Notice in the following lines, the svg element (fullscreen icon) is not vertically aligned
</p>

</section>

CSS

body {
  color: #fff;
  background: #000;
  font-size: 200px;
}

svg {
  height: 1em;
  width: 1em;
  position: relative;
  top: 0.14em;
}