Подключить svg в элементе через use

Использую такую структуру svg

Подключаю так:

В стилях указываю размер и цвет. Не отображается.
Как правильно подключить svg в элементе через use? И как можно таким способом сделать маркеры списка?

Ответ

Использование
К сожалению, этот способ не работает в IE, даже в 11 версии. Есть скрипт, который обрабатывает соответствующие ссылки для браузеров, где они не работают.
Будьте так-же осторожны: в Сhrome невозможно использовать фильтры на таких элементах. Пропадают и объекты с примененными фильтрами как изнутри так и на сам use элемент. Кроме того пропадают объекты с фильтрами из внешних файлов. Этот баг они не могут решить вот уже 5 лет
Тест:
Если svg во внешнем файле, нужно указать путь к нему:


Использование и стилизация CSS:
.marker use{ fill:red; } Тест:
Использование
Есть более кроссплатформенный метод. Маркеры списка можно делать так:
.arrow { background: url('data:image/svg+xml,%3Csvg%20%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20%20viewBox=%22-2%20-2%2022%2044%22%20width=%2220%22%20height=%2240%22%3E%3Cpath%20d=%22M%2010,0%200,20%2010,40%22%20style=%22fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1%22%20/%3E%3Cpath%20d=%22M%2020,0%2010,20%2020,40%22%20%20%20%20style=%22fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1%22%20/%3E%3C/svg%3E'); width: 20px; height: 40px; }

SVG закодирован через encodeURI:
console.log(encodeURI(''))
Полученное помещается в CSS таким образом:
background: url('data:image/svg+xml,[код картинки]')