svg fill color not working with hex colors

Question

Trying to create an svg background pattern, but:

When I am not using fill it is ok, when using color name like: color: red; it's ok, but if using hex colors, nothing shows up.

here are the codes:

OK:

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='red' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

NOT OK:

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='#FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

also check out on jsfiddle:

https://jsfiddle.net/vajnabotond/r362xdjn/19/

Answer 1

# 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