SVG images not showing in Webkit browsers
I was coding a mobile site primarily for the iPhone. I am using SVG for images, but for some reason only a few images appear.
If you look at the screenshot below, you can see the icons are missing:
If you look at https://mobile.hollatme.com/ you can see the error in action. You will notice that the logo does not appear at the top. However, if you go directly to the logo file at https://mobile.hollatme.com/css/svg/logo.svg and then go back to the page, it appears.
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;
}
source to share
Ah, you run into a bug in Webkit. Elements with inline bitmaps are not rendered if you are trying to use CSS, even if you are coding them. To work around this issue, you will need to insert the actual SVG file into an invisible container (ugh), then the images referenced by the CSS will be displayed. You can do something like ...
<div class="icons">
... put all your svg code here
</div>
and in the stylesheet:
.icons {
width: 1px;
height: 1px;
pointer-events: none;
opacity: 0;
overflow: hidden;
}
You can also just paste in a simple PNG. now you have a bitmap embedded in SVG embedded in HTML, why not vectorize those bitmaps or insert a simple PNG?
source to share