Is it possible to add an svg element to a rich text field?

Ask for Help
1

I’ve been trying to add an SVG icon to my app - like the ones from here, but I can’t get it to show and wondering if it’s possible at all?

What I’ve used so far is this:

<div>
    <svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path xmlns="http://www.w3.org/2000/svg" d="M4 7C4 6.44772 4.44772 6 5 6H19C19.5523 6 20 6.44772 20 7C20 7.55228 19.5523 8 19 8H5C4.44772 8 4 7.55228 4 7ZM6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12ZM8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#0D0D0D"></path>
    </svg>
</div>
2

Same, when examining the code, the entire SVG code is removed, leaving only the outer div. I even copied SVG code from a Glide Element and still did not show.

<div style="display: flex;">
  <div style="font-weight: 600; padding-right:3px;">Joe G</div>
  <div style="padding-right:3px; width: 18px;">
    <svg style="height:auto; width: 100%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>check-decagram</title><path fill="#FF5757" d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z" /></svg>
  </div>
  <div style="color: #777; font-weight; 300;">1d</div>
</div>

Should look like this:
Screen Shot 2023-04-17 at 8.30.28 AM

But looks like this:
Screen Shot 2023-04-17 at 8.27.41 AM

Code inspection looks like this:

<div style="display: flex;">
  <div style="font-weight: 600; padding-right:3px;">Hello World</div>
  <div style="padding-right:3px; width: 18px;">
   
  </div>
  <div style="color: #777; font-weight; 300;">1d</div>
</div>
3

Would it work if you convert that to png and use an img tag instead?