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:
# 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