SVG images not showing up in Webkit browsers

Question

I have been coding a mobile website primarily for the iPhone. I am using SVGs for the images, but for some reason only a few of the images show up.

If you look at the screenshot below, you can see that there are missing icons:

If you look at https://mobile.hollatme.com/ you can see the bug in action. You will notice the logo does not appear at the top. However, if you navigate directly to the logo file at https://mobile.hollatme.com/css/svg/logo.svg and then go back to the page it will appear.

HTML :

<div class="profileItems">
    <a class="notificationsProfileItem" href="javascript:{}" data-loc="notifications">Notifications <span></span></a>
    <a class="neighborhoodsProfileItem" href="javascript:{}" data-loc="strolling">Strolling <span></span></a>
    <a class="streamProfileItem" href="javascript:{}" data-loc="stream">Stream <span></span></a>
    <a class="interestsProfileItem" href="javascript:{}" data-loc="interest-trends">Interest Trends <span></span></a>
    <a class="photosProfileItem" href="javascript:{}" data-loc="photos">Photos <span></span></a>
    <a class="shuffleProfileItem" href="javascript:{}" data-loc="shuffle">Shuffle Feeds <span></span></a>
    <a class="messagesProfileItem" href="javascript:{}" data-loc="messages">Messages <span></span></a>
    <a class="neighborsProfileItem" href="javascript:{}" data-loc="neighbors">Neighbors <span></span></a>
    <a class="friendsProfileItem" href="javascript:{}" data-loc="friends">Friends <span></span></a>
    <a class="settingsProfileItem" href="javascript:{}" data-loc="settings">Settings <span></span></a>
</div><!-- End profile items -->

CSS :

.profileItems {}

.profileItems a {
    display:block;
    background-color:#F2F2F2;
    margin:0 0 0.1em 0;
    padding:1.5em 1em 1.5em 2.8em;
    color:#595959;
    font-weight:bold;
    font-size:0.8em;
    opacity:0;
}

    .profileItems a span {
        display:block;
        background:url(svg/goArrow.svg) no-repeat;
        background-size:1em;
        float:right;
        height:1.5em;
        width:1em;
        margin:-0.1em 0 0 0;
    }

.shuffleProfileItem {
    background-image:url(svg/feeds.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.notificationsProfileItem {
    background-image:url(svg/holla.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.neighborhoodsProfileItem {
    background-image:url(svg/neighborhoods.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.interestsProfileItem {
    background-image:url(svg/interests.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.messagesProfileItem {
    background-image:url(svg/message.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.photosProfileItem {
    background-image:url(svg/photo.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.neighborsProfileItem {
    background-image:url(svg/neighbors.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

.friendsProfileItem {
    background-image:url(svg/friends.svg);
    background-repeat:no-repeat!important;
    background-size:1.8em;
    background-position:0.5em;
}

.settingsProfileItem {
    background-image:url(svg/settings.svg);
    background-repeat:no-repeat;
    background-size:1.8em;
    background-position:0.5em;
}

Solution

Ah, you're hitting a bug in Webkit. Elements that have embedded bitmap images won't display if you try with CSS, even if you encode them. To work around this problem you will need to insert the actual SVG file in an invisible container (ugh) then the images referenced in the CSS will be displayed. You can do something such as...

<div class="icons">
  ... put all your svg code here
</div>

and in your stylesheet:

.icons {
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

You can also just insert the plain PNG. what you have now is a bitmap embedded in an SVG that is embedded in HTML, why not either vectorize these bitmaps, or insert the plain PNG?

Comments

[André Figueira]

I see, will try this out when i get back to work on monday, they need to be vectors as it kind of has to be one size for all. So wanted to avoid having to use bitmaps, that would mean had to have a bunch of different sizes. Thanks for the help

[methodofaction]

But if you have PNGs embedded in SVGs you are still displaying bitmaps, not vectors, so they are not resolution independent. Vectorize those icons (with inkscape or Ilustrator) and your problems will be resolved.

[André Figueira]

They aren't pngs, they are vectorised.

[methodofaction]

if you view the source on mobile.hollatme.com/css/svg/logo.svg (you can do this in Chrome, not sure about FF) you will see the PNG file type before the base64 embedding.