如何将内联svg定位为输入元素中的背景图像？

Question

我在搜索框中使用内联svg作为背景图片。

我认为在viewBox中设置宽度和高度相同是正确的，但是ejrm将它设置在20以下，它会切断部分svg。超过20显示，但没有正确定位。设置svg大小并定位它的正确方法是什么？

＆＃13;

＆＃13;

.input__search {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 22a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.321-1.096l5.386 5.39a1 1 0 1 1-1.414 1.413l-5.386-5.388a8 8 0 1 1 1.414-1.415z' fill='red' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 center;
  padding: 10px 40px;
  //background-size: 40px;
}

＆＃13;

<div class="container input">
  <input type="text" placeholder="search" class="input__search">
</div>

＆＃13;

＆＃13;

＆＃13;