3

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>'/>
Lakshay Batra
  • 31
  • 1
  • 2

1 Answers1

5

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

In modern browsers you only need to escape the # character in SVG

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>'/>
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
  • Also in Firefox you need a space after the end of the svg tag > < and before the beginning of the paht tag: ' characters too. – Jorge Gonzalez Feb 12 '22 at 02:26
  • @JorgeGonzalez, what version? The above code without the spaces you mention, runs fine in FireFox – Danny '365CSI' Engelman Feb 12 '22 at 09:24
  • Yes it does, in fact I voted up your answer. I mean when the two chars are side by side, like in the first one, I just want to clarify that, becase it happened to me. – Jorge Gonzalez Feb 13 '22 at 01:30
  • If you are generating the SVG using PHP on the server-side, you can use the PHP `rawurlencode` function to percent-encode the SVG data. – w5m Nov 03 '22 at 10:07