Почему background в псевдоэлементе не отображает svg элемент в виде кода?

Question

[Overlord934]

Если вставлять svg кодом в html - он отображается. Но если поместить его на background в псевдоэлементе - белое пятно.

.blog__slider .swiper-button-next::after{

color: #000;
font-size: 0px;
background: url('data:image/svg+xml;utf8, <svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 16L28.5 23.5L21 31M46 23.5C46 11.0736 35.9264 1 23.5 1C11.0736 1 1 11.0736 1 23.5C1 35.9264 11.0736 46 23.5 46C35.9264 46 46 35.9264 46 23.5Z" stroke="#7E2832" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
min-width: 47px;
min-height: 47px;
}

В чем может быть проблема? Ссылка на кодпен

Comments

[Максим]

Если используете используете after before то и пишем content

[Overlord934]

Максим, content добавляется из подключенного css файла swiper

[Ankhena]

Overlord934, не работает, потому что вы запихнули прямо теги в data
https://yoksel.github.io/url-encoder/