Перенести анимацию css в svg иконку

.spinner {
    animation: spinner 1.5s ease-in-out infinite;
}
@keyframes spinner {
    0% {stroke-dasharray: 0, 100; stroke-dashoffset: 0}
    50% {stroke-dasharray: 65, 35; stroke-dashoffset: -35}
    100% {stroke-dasharray: 65, 100; stroke-dashoffset: -100.5}
}

<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><circle class="spinner" fill='none' stroke='blue' stroke-width='3' cx="18" cy="18" r="16"><animateTransform attributeName="transform" type="rotate" dur="6s" values="0 18 18;360 18 18" repeatCount="indefinite"></animateTransform></circle></svg>

Второй вопрос, возможно ли туже самую анимацию реализовать, но только через стили, через псевдоэлемент?

Собираюсь что та сделать вроде этого

.load:before {
    content: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle class='spinner' cx='18' cy='18' r='16'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='6s' values='0 18 18;360 18 18' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E \");
    position: absolute;
    width: max(40px, 9%);
    left: 50%;
    top: 50%;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    z-index: 10;
}

То есть, что если возможно, быть может и не стоит прибегать к svg.