SVG flashes during CSS transition

Question

I've been developing a new company website, and to ensure it looks good on retina, I have been using SVG icons, something I've never really done before. However, I'm having a bit of an issue when trying to apply a CSS transition to the background-image, which is an SVG.

When the transition begins, the icon disappears, and once it finishes, the new icon appears in its place. If I use PNGs however, it works as it should. Is this a browser limitation? Or I am not doing something I should be? No matter what background settings I've tried, I can't get it to fade smoothly.

Watch the phone icon (SVG) compared to the logo (PNG).

CSS of element:

nav#header-nav div#phone-number {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  float: left;
  background-image: url(//cdn.shopify.com/s/files/1/0554/1957/t/4/assets/phone-white.svg?19873);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
  padding-left: 28px;
  color: rgb(255, 255, 255);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

nav#header-nav.small div#phone-number {
  color: rgb(0, 0, 0);
  background-image: url(//cdn.shopify.com/s/files/1/0554/1957/t/4/assets/phone.svg?19873);
}

HTML of element:

<div id="phone-number">(555) 867-5309</div>

Answer 1

Well, by using SVG you can not fade between two icons. However you can still set just one of them and use the Fill property.

Try separate the icon from the text or include the icon inside the div and then animate the Fill property instead.

Example:

#icon{
   transition: fill 0.5s ease in-out;
   fill:black;
}
#phone-number:hover #icon{
   fill:white;
}