Wanna see something cool? Check out Angular Spotify 🎧

SVG fill color doesn't work with hex colors

Problem

Basically, this works fine with fill='red'

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>")

This doesn’t work as well with fill='#FF0000'

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>")

Reason and solution

# in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #. That is the value of escaped # character. It works with fill='%23FF0000'

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>")

Wondering what is Fragment Identifiers, check this article

https://css-tricks.com/svg-fragment-identifiers-work/