Menu with svg image icons sometimes does not load in mobile version

Question

What could possibly be affecting my experience in this? I had to change some images to png, but I can’t tell if it was the best way, the experience I have on desktop layout is much better with SVG icons. Why on mobile by Chrome browser I have problems with the rendering of icons, have some way, attribute, tag or artifice to make backgrounds recognize this image and always load?

Example of CSS:

.modal-detalhes .modal-detalhes-block .resume i.association-icon {
    background: url(../img/associantion_icon.svg) center center no-repeat;
    background-size: contain;
}

Tested on mobiles like Android 9.0 Pie, iOS 9, 10 and 10 Max. And on Chrome desktop on Macbookair with macOS Catalina 10.15.1

Answer 1

Yes and here is an example that Bootstrap itself uses by chance, but here is an article that should interest you a lot with a test using even a solution with Base64 in the URI https://css-tricks.com/lodge/svg/09-svg-data-uris/

Example:

The important thing is to start the link with data:image/svg+xml;charset=utf8,%3C and here comes your SVG

background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);

An example applying the Data URI on body with SVG as Background

body {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 8 8'%3E %3Ccircle cx='1' cy='1' r='1' opacity='0.25' /%3E %3Ccircle cx='5' cy='5' r='1' opacity='0.25' /%3E %3C/svg%3E");
}

Example 2

body {
    background-image:
        url("data:image/svg+xml;utf8,\
            <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'>\
                <rect fill='%23000' width='50' height='50' x='0' y='0' />\
                <rect fill='%23000' width='50' height='50' x='50' y='50' />\
                <rect fill='%23fff' width='50' height='50' x='50' y='0' />\
                <rect fill='%23fff' width='50' height='50' x='0' y='50' />\
            </svg>");
    background-size: 80px;
}

---

Traditional technique tb works...

.box {
  width: 100px;
  height: 100px;
  background-image: url(https://s.cdpn.io/3/kiwi.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #000;
}
  

<div class="box"></div>