如何將svg圖像作爲背景圖標添加到寬度和高度輸入的右側而不會影響輸入的寬度和高度

我試圖在輸入字段中添加svg作爲背景圖標。問題是我必須給svg一個寬度和高度，否則它在輸入字段中會太大。但是，如果影響輸入的寬度和高度。任何人都可以幫助我如何實現這一目標嗎？我對使用SVG不太熟悉。如何將svg圖像作爲背景圖標添加到寬度和高度輸入的右側而不會影響輸入的寬度和高度

CSS：

input.prefs-active { 
min-width:40%; 
height:auto; 
border-radius: 3px; 
border: 1px solid #333366; 
padding: 15px; 
font-family: "helvetica neue1 0"; 
font-size: 16px; 
color: #595959; 
margin-bottom:33px; 
background: url(../images/x-icon.svg) no-repeat; 
width:16px; 
height:16px; 
background-position:right;

}

HTML：

<input class="prefs-active" type="text" value="[email protected]">

SVG：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<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" 
    viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:#333366;} 
</style> 
<path class="st0" d="M97.1,7.4c1.2-1.2,1.2-3.2,0-4.5c-1.2-1.2-3.2-1.2-4.5,0L50.3,45.2L8,2.9c-1.2-1.2-3.2-1.2-4.5,0 
    s-1.2,3.2,0,4.5l42.3,42.3L3.5,92c-1.2,1.2-1.2,3.2,0,4.5c1.2,1.2,3.2,1.2,4.5,0l42.3-42.3l42.3,42.3c1.2,1.2,3.2,1.2,4.5,0 
    c1.2-1.2,1.2-3.2,0-4.5L54.8,49.7L97.1,7.4z"/> 
</svg>

來源

2017-04-14 user3162058