Cross browser compatibility with SVG background - svg

Question

I work on a app which supports on IE 10 and Chrome. For background images we go with svg sprite.Wherever we need to position icons we have defined a common class for the image and also defined class based on the icon.
Once we build the app, we found the positioning is fine on chrome browser and for IE we need to write a separate css fix based on the browser.
html
<ul>
<li><a class="pico menu href="javascript:void(0)">Home</a></li>
</ul>
My css looks like
.pico:after{
background:('sprite.svg') 0 0 no-repeat;
background-size: 280px 660px;
position:absolute;
content:""
}
.pico.menu:after{
background-position:-106px 6px;
}
.ie .pico.menu:after{
background-position:-110px 6px;
}
Is there anyway to have a generic styles for IE and Chrome ?. Or is the default behavior of the browsers.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="300px" height="650px" viewBox="561 165 246 580" enable-background="new 561 165 246 580" xml:space="preserve">
<g>
<g>
<polygon fill="#F47621" points="580.3,230 585.5,235.2 590.8,230 589.8,229 585.5,233.1 581.3,229 "/>
</g>
<g>
<polygon fill="#F47621" points="580.3,225.5 585.5,230.7 590.8,225.5 589.8,224.6 585.5,228.8 581.3,224.6 "/>
</g>
</g>
</svg>

Answer 1

Here i cleaned up some of the code. Don't use the external url for your images of course.
Tested in chrome and IE 11 and IE 10. Both will display the image correctly.
.pico::after {
background: url(http://imgh.us/test_55.svg) 0 0 no-repeat;
background-size: 280px 660px;
position: absolute;
content: "";
display: inline-block;
width: 30px;
height: 20px;
}
.pico.menu::after {
background-position: -10px -65px;
}
svg {
border: 5px solid black;
}
<ul>
<li><a class="pico menu" href="javascript:void(0)">Home</a>
</li>
</ul>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="650px" viewBox="561 165 246 580" enable-background="new 561 165 246 580" xml:space="preserve">
<polygon fill="#F47621" points="580.3,230 585.5,235.2 590.8,230 589.8,229 585.5,233.1 581.3,229 " />
<polygon fill="#F47621" points="580.3,225.5 585.5,230.7 590.8,225.5 589.8,224.6 585.5,228.8 581.3,224.6 " />
</svg>