Inline SVG not displaying on mobile browsers - html

Question

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-15 -15 56 80'><path d='M 16.858655,50 V 27.192245 h 7.665842 l 1.147793,-8.887827 h -8.813456 v -5.674363 c 0,-2.573533 0.716046,-4.3274238 4.41032,-4.3274238 l 4.713297,-0.0015 V 0.35099374 C 25.167627,0.24176784 22.370432,3.46934e-7 19.11473,3.46934e-7 12.319565,3.46934e-7 7.6680488,4.1432288 7.6680488,11.749759 v 6.554627 H -0.017549 v 8.887827 h 7.6854185 v 22.807754 z' fill='#f7f7f7' /></svg>");
div {
height: 150px;
width: 100px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-15 -15 56 80'><path d='M 16.858655,50 V 27.192245 h 7.665842 l 1.147793,-8.887827 h -8.813456 v -5.674363 c 0,-2.573533 0.716046,-4.3274238 4.41032,-4.3274238 l 4.713297,-0.0015 V 0.35099374 C 25.167627,0.24176784 22.370432,3.46934e-7 19.11473,3.46934e-7 12.319565,3.46934e-7 7.6680488,4.1432288 7.6680488,11.749759 v 6.554627 H -0.017549 v 8.887827 h 7.6854185 v 22.807754 z' fill='#f7f7f7' /></svg>");
}
<div></div>
Using the above style, desktop browsers (Chrome, Firefox) are displaying my element correctly but mobile browsers (Chrome, Firefox) are not displaying anything. Is there some known issue for this discrepancy or am I doing something completely wrong here?

Answer 1

When adding an url all reserved chars MUST be escaped, so the char # became %23:
fill='#f7f7f7'
to
fill='%23f7f7f7'
In this way should work on all browsers.
Check this on mobile:
https://jsfiddle.net/q1g1pj13/2/
here i changed your light gray with a more contrasted color (your is almost invisible on jsfiddle):
https://jsfiddle.net/q1g1pj13/3/