SVG -изображение размыто в масштабе 100% страниц, но когда я увеличиваю/uper, оно становится нормально ⇐ CSS

[Anonymous]

Код: Выделить всё

Icon Button Snippet


.icon-btn {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid transparent;
padding: 0;
}

.sizeMdLg {
width: 22px;
height: 22px;
}

.icon-btn.sizeXl {
height: 54px;
min-width: 54px;
}

.icon-btn.radiusFull {
border-radius: 50%;
}

.whiteBorderedDark {
background-color: white;
border-color: gray;
}

.whiteBorderedDark:hover {
color: var(--color-neutral-700);
}

.icon {
display: block;
}

.border {
border: none;
box-shadow: 0 0 0 1px var(--color-blue-50);
}

.notificationsBtnWrp {
position: relative;
}

Я изо всех сил пытаюсь понять, почему изображение SVG в кнопке в моем приложении React выглядит размытым, когда я не увеличиваю масштаб, но когда я меняю масштаб (110%, 90%), он начинает выглядеть нормально. src = "https://i.sstatic.net/29x3qym6.png"/>

arte arte "at intember arte"/>
arte arte "/>
ante". src = "https://i.sstatic.net/bytqibur.png"/>
Первое изображение состоит из шкалы страниц 110%, второе - 100%, третье - 90%. Почему это то, что размыто в масштабе на 100%?

Подробнее здесь: https://stackoverflow.com/questions/796 ... ets-normal