Strange behaviour in Safari with SVG sprite

Question

I seem to be having a strange behaviour when using SVG sprites in Safari. Modern versions of IE, Firefox and Chrome all show my icons correctly and Safari does not. I am trying to display my logo-icon with the following css style:

.icon-logo {
    background: url('../images/sprites/graphics-sprite.png');
    background-image: url('../images/sprites/graphics-sprite.svg'), none;
    background-size: 341px 236px;
    background-position: 0 0;
    height: 40px;
    width: 110px;

}

All I see however is a very small version of the whole sprite image in the 110x40px space instead of only the portion where the logo is. When debugging using the devloper tools and then removing the SVG background-image propery, it seems to work - I now only see the logo. When removing the PNG in the code entirely it still does not work. I have tried everything that I have found in the internet so far and cannot get it to work.

Well, I did get one version to work and that was by swapping the background-size with the width and height values, like this:

.icon-logo {
    background: url('../images/sprites/graphics-sprite.png');
    background-image: url('../images/sprites/graphics-sprite.svg'), none;
    background-size: 110px 40px;
    background-position: 0 0;
    height: 341px;
    width: 236px;

}

Now it works in Safari, but in NONE of the other browsers. The other browsers now behave exactly like Safari did before.

Seeing as the PNG version seems to work normally, it must have something to do with the SVG image. Is there anything I have missed when dealing with SVG-sprite images in Safari?

Edit: Safari on iPhone and iPad displays the icons correctly. This only seems to happen on windows-safari.

Any help would be greatly appreciated.

Thanks and best regards, Michael