CODEWITHSUNDEEP
htmlcsssvg
Karai17
Karai17

Reputation: 943

Inline SVG not displaying on mobile browsers

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?

Upvotes: 0

Views: 1609

Answers (1)

holden
holden

Reputation: 1779

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/

Upvotes: 2

Related Questions