Как я могу сделать <svg>встроенным в абзаце?

Question

Я пытаюсь сделать функцию тега SVG встроенной в абзаце.

Тег работает так, как я хочу, встроенной в абзаце, в то время как SVG требует собственную строку.

Это происходит:

Мой текст идет сюда

[SVG изображение]

мой текст продолжается здесь.

Это то, что я хочу:

Мой текст идет здесь [SVG изображение] Мой текст продолжается здесь.

Этот JSFiddle показывает проблему: https://jsfiddle.net/aorsten/pq6zsmh0/9/

<p class="text-justify">
  I am writing a text here, and letting it go on for a few lines. <img src="https://i.postimg.cc/gncBZvLn/block2.png" alt="hi"> I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines.
  I am writing a text here, and letting it go on for a few lines.
  <a href="#">
    <svg viewBox="0 0 314325 314325" preserveAspectRatio="xMidYMid meet" class="svg">
      <g transform="translate(0 0)scale(0.16019417475728157 0.16019417475728157)rotate(0 157162.5 157162.5)translate(0 0)">
        <g transform="translate(0 0)rotate(0 981075 981075)">
          <image href="https://i.postimg.cc/hJmCBs63/groupgrid.png" width="1962150" height="1962150" preserveAspectRatio="none">
          </image>
        </g>
        <g transform="translate(1133475 990600)rotate(0 73025 73025)">
          <image href="https://i.postimg.cc/gncBZvLn/block2.png" width="146050" height="146050" preserveAspectRatio="none">
          </image>
        </g>
      </g>
    </svg>
  </a> I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines.
</p>

.text-justify {
  text-align: justify !important;
}

img {
  max-height: 1.5em;
}

.svg {
  max-height: 1.5em;
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

Answer 1

Используйте опцию width для SVG.

.svg {
  width: 1.5em;
  vertical-align: middle
}

Answer 2

.text-justify {
  text-align: justify!important;
}

img {
  max-height: 1.5em;
}

.svg {
  max-height: 1.5em;
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

<p class="text-justify">
  I am writing a text here, and letting it go on for a few lines. <img src="https://i.postimg.cc/gncBZvLn/block2.png" alt="hi"> I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines. 
  <a href="#">
    <svg width="24" height="24" viewBox="0 0 314325 314325" preserveAspectRatio="xMidYMid meet" class="svg">
      <g transform="translate(0 0)scale(0.16019417475728157 0.16019417475728157)rotate(0 157162.5 157162.5)translate(0 0)">
        <g transform="translate(0 0)rotate(0 981075 981075)">
          <image href="https://i.postimg.cc/hJmCBs63/groupgrid.png" width="1962150" height="1962150" preserveAspectRatio="none">
          </image>
        </g>
        <g transform="translate(1133475 990600)rotate(0 73025 73025)">
          <image href="https://i.postimg.cc/gncBZvLn/block2.png" width="146050" height="146050" preserveAspectRatio="none">
          </image>
        </g>
      </g>
    </svg>
  </a> 
  I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines. I am writing a text here, and letting it go on for a few lines. 
</p>