Why is Mobile Chrome not Rendering the Referenced SVG?

Question

I have the following SVG referenced as a background image with the width and height defined in my CSS file.

It displays perfectly in Safari (desktop and mobile), Brave (desktop and mobile), Firefox (desktop and mobile), and Chrome's desktop browser. For some reason, the image does not display in the Chrome mobile browser, at all.

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 1650 145" style="enable-background:new 0 0 1650 145;" xml:space="preserve">

<style type="text/css">
    .st0{fill:#F7F7F7;}
</style>

<path class="st0" d="M-5.2,0l0,2.9c0.5,0.7,0.8,1.6,0.8,2.8c0,0.3,0,0.6,0,1c0.1,0.4,0.1,0.8,0,1.3c0,0.1,0,0.2,0,0.3
c-0.1,3.4-0.2,6.8-0.5,10.1l2,122.9c0.1,0.8,0.2,1.5,0.3,2.3c0.6-1.8,2.1-3.2,4.5-3.2c3.9,0,5.4,3.6,4.6,6.5l836.1-2.6l4.4-33.5
L-5.2,0z"/>

<path class="st0" d="M1648.9,8.3c-0.3-1.2-0.5-2.4-0.8-3.5c-0.2-0.9-0.2-1.7,0-2.4c-0.2-1.6,0.3-2.9,1.1-3.9l-852,115l4.2,31.5
c0,0,0.1,0,0.1,0c1.8,0,3.1,0.8,3.9,1.9l843.2-2l2.2-97.4C1650.9,34.3,1650.6,21.2,1648.9,8.3z"/>

<path class="st0" d="M803.1,157.5C802,154,802,151,802,147C802,151,802,154,803.1,157.5"/>
</svg>

Codette Codette · Accepted Answer · 2019-04-12T04:59:42

After further troubleshooting, I discovered that my SVG also displayed well on Chrome's mobile browser for iOS, but not Chrome's mobile browser for Android.

It turns out Chrome's mobile browser for Android will not show the SVG if I set my parent element height in "vh" instead of "px."

To elaborate, I'd set the height of my parent element to 40vh (with the SVG referenced in the child element as a background image), and Chrome mobile for Android would not show the SVG. Once I changed the height of my parent element to 350px, Chrome mobile browser for Android displayed the SVG referenced in the child element, just fine.

In summation - Chrome's mobile browser, specifically, for Android doesn't like this:

.parent {
    height: 40vh;
}
.child {
    background-image: url(images/example.svg);
}

But, it does like this:

.parent {
    height: 350px;
}
.child {
    background-image: url(images/example.svg);
}

Why is Mobile Chrome not Rendering the Referenced SVG?

1 Answers