# in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #. That is the value of escaped # character.
background: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" ><path fill="%23FF0000" d='M 0,10 H 20 L 10,0 Z' /></svg>") repeat-x;
You can find it all well explained on following link: https://codepen.io/gunnarbittersmann/pen/BoovjR