Проблема размытия фонового изображения (SVG) при использовании масштаба при наведении

Question

Мне нужно увеличить изображение при наведении курсора и фокусировке. При наведении от 0,9 до 1 и на фокусе от 1 до 1,2. Проблема в том, что при масштабировании картинка размыта. Независимо от того, с какого размера я начинаю, .9 или 1. Я использовал два решения:

transform: scale3d(.9, .9, .9);
transform: translateZ(0) scale (.9, .9);

Но это не сработало (решение во фрагменте).

Что я делаю неправильно? Может быть есть другие решения?

.button {
  border: none;
  background-color: transparent;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('https://svgshare.com/i/FWE.svg');
  width: 28px;
  height: 36px;
  transition: transform .3s ease, background .3s ease, opacity .2s ease;
  box-shadow: none;
  will-change: transform;
  transform: scale3d(.9,.9,.9);
  transform: translateZ(0) scale(.9, .9);
}

.button:hover {
  cursor: pointer;
  transform: scale3d(1,1,1);
  transform: translateZ(0) scale(1, 1);
}

.button:focus {
  outline: none;
  transform: scale3d(1.2,1.2,1.2);
  transform: translateZ(0) scale(1.2, 1.2);
}

<button class="button">
</button>
<button class="button">
</button>

Answer 1

Вы можете поместить изображение в псевдоэлемент и изменить размер этого элемента - таким образом вы всегда будете сохранять четкое изображение (кажется намного острее, чем любой другой способ, который мы обсуждали в комментариях):

.button {
  cursor: pointer;
  outline: none;
  border: none;
  width: 36px;
  height: 36px;
  background-color: transparent;
  box-shadow: none;
  position: relative;
}

.button:after {
  content: '';
  display: block;
  background: url('https://svgshare.com/i/FWE.svg') center center no-repeat;
  background-size: contain;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all .15s linear;
}

.button:hover:after {
  width: 30px;
  height: 30px;
}

.button:focus:after {
  width: 34px;
  height: 34px;
}

<button class="button">
</button>
<button class="button">
</button>