Issue displaying inline SVG as src attribute to <img> tag [duplicate]

Question

SVG alone works, but not as inline with src attribute to <img> tag.

<img src='data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 9.14453C0 9.60156 0.175781 10.0234 0.492188 10.3398L7.91016 17.7578C8.57812 18.4258 9.66797 18.4258 10.3008 17.7578L17.4727 10.5859C18.1406 9.95312 18.1406 8.86328 17.4727 8.19531L10.0547 0.777344C9.73828 0.460938 9.31641 0.25 8.85938 0.25H1.6875C0.738281 0.25 0 1.02344 0 1.9375V9.14453ZM3.9375 2.5C4.85156 2.5 5.625 3.27344 5.625 4.1875C5.625 5.13672 4.85156 5.875 3.9375 5.875C2.98828 5.875 2.25 5.13672 2.25 4.1875C2.25 3.27344 2.98828 2.5 3.9375 2.5Z" fill="#D40026"/></svg>'/>

Answer 1

You have to escape all characters that can be used in a URI

That means #D40026 needs to become %23D40026

See: https://yoksel.github.io/url-encoder/

<svg width="19" height="19" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 91C0 96 2 100 5 103L79 178C86 184 97 184 103 178L175 106C181 100 181 89 175 82L101 8C97 5 93 3 89 3H17C7 3 0 10 0 19V91ZM39 25C49 25 56 33 56 42 56 51 49 59 39 59 30 59 23 51 23 42 23 33 30 25 39 25Z" 
fill="#D40026"/>
</svg>

<img src='data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 91C0 96 2 100 5 103L79 178C86 184 97 184 103 178L175 106C181 100 181 89 175 82L101 8C97 5 93 3 89 3H17C7 3 0 10 0 19V91ZM39 25C49 25 56 33 56 42 56 51 49 59 39 59 30 59 23 51 23 42 23 33 30 25 39 25Z" 
fill="firebrick"/></svg>'/>

<img src='data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 91C0 96 2 100 5 103L79 178C86 184 97 184 103 178L175 106C181 100 181 89 175 82L101 8C97 5 93 3 89 3H17C7 3 0 10 0 19V91ZM39 25C49 25 56 33 56 42 56 51 49 59 39 59 30 59 23 51 23 42 23 33 30 25 39 25Z" 
fill="%23D40026"/></svg>'/>