Fix icons on firefox by decoding svg imgs

[evenstensberg]

Before:

After:

[paulirish]

It's nice having these in utf8 svg as they remain very editable.

I looked into this issue and found these articles which affirm my belief this shouldn't be a crossbrowser issue:

• https://css-tricks.com/probably-dont-base64-svg/
• https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

then after debugging the .lh-debug::before triangle icon a bit i saw this:

Interestingly, the error message they print is pointing to the wrong thing. the real issue is that the fill attribute doesn't finish.

And why? Well, Taylor's post mentions that #'s need to be escaped. :) And we've got #s for our hex colors. I tried manually changing the color from hex to hsl and everything is good.

So shall we use HSL instead? :)

[paulirish]

thx.
let's revert this encoding change and go from hex colors to hsl colors.

http://mothereffinghsl.com y'all.

[ebidel]

The fill are definitely it. We ran into that back in #1124 (comment).

[evenstensberg]

I thought it was the issue too, but people on the googs explained as if the problem wasn't just the hashes being invalidated.

💯 Agree about utf 8 being most convenient , will change this ✌️

[evenstensberg]

Ups, reverted this as I did git rebase -i HEAD and dropped the latest commit, hold on ..

[evenstensberg]

This is ready

[paulirish]

honestly, this little bug is probably worth a lighthouse audit in its own right: "SVG background-images are cross-browser" :)

[paulirish]

lgtm. thanks!

[paulirish]

fixes (partiallly) #2320