firefox not displaying SOME svg files but works perfectly in Chrome - html

Question

html
<li></li>
<li></li>
css
/*this svg is displayed in firefox*/
.email{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-indent: -9999px;
background-image: url("../images/email.svg");
background-position: 0 0;
}
/*this one not*/
.twitter{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-indent: -9999px;
background-image: url("../images/twitter.svg");
background-position: 0 0;
}
svg code(email and twitter file)
email
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="50px" height="100px" viewBox="0 0 50 100" enable-background="new 0 0 50 100" xml:space="preserve">
<g>
<path fill="#BDC3C7" d="M50,25c0,13.807-11.193,25-25,25l0,0C11.193,50,0,38.807,0,25l0,0C0,11.193,11.193,0,25,0l0,0
C38.807,0,50,11.193,50,25L50,25z"/>
<g>
<path fill="#FFFFFF" d="M39.203,20.306c0,0-13.034,10.387-13.604,10.836c-0.569,0.45-1.289,0-1.289,0s-13.03-10.383-13.464-10.817
c-0.434-0.435-0.709,0.11-0.709,0.11v13.794c0,1.055,0.863,1.917,1.917,1.917h25.889c1.055,0,1.918-0.863,1.918-1.917V20.465
C39.603,20.076,39.203,20.306,39.203,20.306z"/>
<path fill="#FFFFFF" d="M37.944,13.853H12.055c-1.04,0-1.892,0.791-1.916,1.765l-0.002,0v0.168c0,0,13.559,10.797,14.203,11.237
s1.199-0.015,1.199-0.015l9.4-7.365l0.021-0.016l4.902-3.841v-0.127C39.862,14.666,38.999,13.853,37.944,13.853z"/>
</g>
</g>
<g>
<path fill="#E74C3C" d="M50,75c0,13.808-11.192,25-25,25l0,0C11.193,100,0,88.807,0,75l0,0c0-13.807,11.193-25,25-25l0,0
C38.808,50,50,61.193,50,75L50,75z"/>
<g>
<path fill="#FFFFFF" d="M39.204,70.305c0,0-13.035,10.388-13.604,10.837s-1.288,0-1.288,0s-13.03-10.383-13.464-10.817
c-0.434-0.435-0.709,0.11-0.709,0.11v13.794c0,1.055,0.863,1.917,1.917,1.917h25.89c1.055,0,1.918-0.862,1.918-1.917V70.464
C39.604,70.076,39.204,70.305,39.204,70.305z"/>
<path fill="#FFFFFF" d="M37.945,63.853h-25.89c-1.04,0-1.892,0.79-1.916,1.765l-0.002-0.001v0.169
c0,0,13.559,10.797,14.203,11.236s1.198-0.015,1.198-0.015l9.401-7.365l0.02-0.016l4.903-3.841v-0.128
C39.863,64.666,39,63.853,37.945,63.853z"/>
</g>
</g>
</svg>
twitter
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="50px" height="100px" viewBox="0 0 50 100" enable-background="new 0 0 50 100" xml:space="preserve">
<g>
<path fill="#BDC3C7" d="M50,25c0,13.807-11.193,25-25,25l0,0C11.193,50,0,38.807,0,25l0,0C0,11.193,11.193,0,25,0l0,0
C38.807,0,50,11.193,50,25L50,25z"/>
<path fill="#FFFFFF" d="M39.27,16.148c-1.05,0.466-2.178,0.781-3.362,0.922c1.209-0.725,2.137-1.872,2.574-3.24
c-1.132,0.671-2.385,1.159-3.718,1.421c-1.068-1.138-2.59-1.849-4.274-1.849c-3.233,0-5.855,2.622-5.855,5.855
c0,0.458,0.052,0.906,0.151,1.334c-4.866-0.244-9.181-2.575-12.068-6.118c-0.504,0.865-0.793,1.871-0.793,2.944
c0,2.031,1.034,3.824,2.604,4.874c-0.959-0.03-1.862-0.294-2.652-0.732c0,0.024,0,0.049,0,0.074c0,2.837,2.018,5.204,4.697,5.741
c-0.492,0.134-1.009,0.206-1.543,0.206c-0.377,0-0.744-0.037-1.102-0.105c0.745,2.326,2.908,4.019,5.47,4.066
c-2.004,1.57-4.529,2.506-7.272,2.506c-0.473,0-0.938-0.028-1.397-0.082c2.591,1.662,5.669,2.631,8.976,2.631
c10.77,0,16.66-8.922,16.66-16.66c0-0.254-0.006-0.506-0.017-0.757C37.492,18.354,38.484,17.323,39.27,16.148z"/>
</g>
<path fill="#4099FF" d="M50,75c0,13.808-11.192,25-25,25l0,0C11.193,100,0,88.807,0,75l0,0c0-13.807,11.193-25,25-25l0,0
C38.808,50,50,61.193,50,75L50,75z"/>
<path fill="#FFFFFF" d="M39.271,66.149c-1.05,0.465-2.179,0.78-3.363,0.922c1.209-0.725,2.138-1.872,2.575-3.24
c-1.132,0.671-2.385,1.159-3.719,1.421c-1.068-1.138-2.59-1.849-4.273-1.849c-3.234,0-5.856,2.621-5.856,5.855
c0,0.459,0.052,0.905,0.152,1.334c-4.867-0.244-9.181-2.575-12.068-6.118c-0.504,0.865-0.793,1.871-0.793,2.944
c0,2.031,1.034,3.823,2.604,4.873c-0.959-0.03-1.863-0.294-2.652-0.732c0,0.024,0,0.05,0,0.074c0,2.837,2.018,5.203,4.697,5.741
c-0.491,0.134-1.009,0.205-1.542,0.205c-0.377,0-0.744-0.037-1.102-0.104c0.745,2.326,2.907,4.019,5.469,4.066
c-2.004,1.57-4.528,2.506-7.271,2.506c-0.473,0-0.939-0.027-1.397-0.081c2.591,1.661,5.669,2.63,8.976,2.63
c10.771,0,16.659-8.922,16.659-16.659c0-0.254-0.006-0.507-0.017-0.758C37.493,68.354,38.485,67.323,39.271,66.149z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
The email.svg file is displayed properly in firefox but twitter.svg is not displayed but both are working fine with chrome and IE, tried re-saving the files with same specifications in illustrator but getting the same result. Not sure where the problem is, tried add a style like:
svg{
width: 100%;
height: 100%;
}
still getting the same results.