SVG currentColor не наследуется от родительского деления при создании из CSS

Question

Я пытаюсь интегрировать SVG из файла CSS со следующим кодом:

.circle:before {
    content: url('data:image/svg+xml;charset=UTF-8, <svg width="100" height="100" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/></svg>');
}

<div style="color:red; fill:blue;">
    <div class="circle"></div>
    <svg width="100" height="100" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/></svg>
</div>

Я не могу понять, почему цвет применяется, когда SVG вставлен в HTML, и не применяется, когда SVG создается из CSS