Javascript Jquery mobile自定义svg图标在chrome中不起作用

我正在JQM中使用一个自定义svg图标。 问题是这个图标在chrome中不起作用，而在firefox中它的工作状态是完美的

代码如下：

<div id='index' data-role='page'>
  <div data-role='header'>
    <div data-role='navbar' class='ui-corner-all ui-nodisc-icon'>
      <ul>
        <li>
          <a href="#" data-icon='face'></a>
        </li>
      </ul>
    </div>
  </div>
</div>

svg：

.ui-icon-face:after{
    background-image: url("../icons/face.svg");
}

<svg version="1.2" baseProfile="tiny"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="36px" height="36px" viewBox="0 0 36 36" xml:space="preserve">
<defs>
</defs>
<rect fill="#3B5998" width="36" height="36"/>
<path fill="#FFFFFF" d="M30.895,16.535l-0.553,5.23h-4.181v15.176h-6.28V21.766H16.75v-5.23h3.131v-3.149
    c0-4.254,1.768-6.796,6.796-6.796h4.181v5.23h-2.615c-1.952,0-2.081,0.736-2.081,2.1v2.615H30.895z"/>
</svg>