Как вернуть качество картинки в процессе анимации? SVG?

Столкнулся с проблемой ухудшения качества картинки при использовании анимации. Понимая, что далеко не первый, кто с этим столкивается - загуглил и понял, что SVG сможет решить мою проблему. Сначала изменил просто формат самого изображения на .svg, но не помогло => нужно именно через тег <svg>...<svg>. Проблема в том, что даже не знаю, можно ли с помощью этого тега сделать то, что мне нужно (картинку прикрепил) и как это сделать...

Код анимации, на всякий случай:

 .orderOnlineB {
    position: fixed;
    animation: animOrderOnlineB 6s linear infinite;
}

@keyframes animOrderOnlineB {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}