SVG Sprite在输入中定位

Question

我有一个包含两个图标的SVG精灵。

使用以下CSS我试图让这个精灵图像位于输入提交中心。

input[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%; // Background to fill container height
    width: 20px;
    background: #FFF url('/-/graphics/search.svg') no-repeat;
    background-size: 200%;
    background-position: 0 0;
    text-indent: -9999px;           
}

精灵就在这个容器中，就像这样，但是图标只是扩展到输入的大小，而不是20px。灰色容器的高度约为80px。

任何人都可以了解如何在这样的输入中放置SVG精灵，设置为一定的大小？

这是SVG代码：

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="30.239px" 
    height="30.239px" 
    viewBox="0 0 60.478 60.478">

     <defs>
        <g id="search">
            <path d="M20.194,3.46c-4.613-4.613-12.121-4.613-16.734,0c-4.612,4.614-4.612,12.121,0,16.735
                c4.108,4.107,10.506,4.547,15.116,1.34c0.097,0.459,0.319,0.897,0.676,1.254l6.718,6.718c0.979,0.977,2.561,0.977,3.535,0
                c0.978-0.978,0.978-2.56,0-3.535l-6.718-6.72c-0.355-0.354-0.794-0.577-1.253-0.674C24.743,13.967,24.303,7.57,20.194,3.46z
                 M18.073,18.074c-3.444,3.444-9.049,3.444-12.492,0c-3.442-3.444-3.442-9.048,0-12.492c3.443-3.443,9.048-3.443,12.492,0
                C21.517,9.026,21.517,14.63,18.073,18.074z"/>
        </g>
     </defs>

    <use x="0" y="0" style="fill: #d94e48" xlink:href="#search" />  
    <use x="30.239" y="0" style="fill: #777" xlink:href="#search" />        

</svg>