入力の幅と高さに影響を与えずに、入力の右側に背景アイコンとしてsvgイメージを追加する方法

入力フィールド内に背景アイコンとしてsvgを追加しようとしています。問題は、私はsvgに幅と高さを与えなければならない、または入力フィールド内で大きすぎることです。しかし、ifは入力の幅と高さに影響します。誰も私がこれを達成できる方法を手伝ってもらえますか？私は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