Встраивание SVG в CSS через ссылку на использование

Question

Я пытаюсь повторно использовать встроенный SVG через автоматически сгенерированный элемент в CSS, но он не работает должным образом.

Это SVG:

<svg><use xlink:href="#arrow"/></svg>

И после base64 кодирования его в этот CSS:

#icon:after {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background-image: url(data:image/svg+xml;base64,PHN2Zz48dXNlIHhsaW5rOmhyZWY9IiNhcnJvdyIvPjwvc3ZnPg==);
}

Не удается отобразить SVG

Вот более полный кодекс.

Answer 1

Когда SVG используется в контексте изображения, будь то через <img> или в этом случае через CSS background-image оно должно быть завершено в одном документе. Ссылки вне документа не допускаются.

Поэтому #arrow должен указывать на элемент со стрелкой id в этом SVG-кодированном base64-документе.