Использование <use>
:
К сожалению, этот способ не работает в IE, даже в 11 версии. Есть скрипт, который обрабатывает соответствующие ссылки для браузеров, где они не работают.
Будьте так-же осторожны: в Сhrome невозможно использовать фильтры на таких элементах. Пропадают и объекты с примененными фильтрами как изнутри так и на сам use
элемент. Кроме того пропадают объекты с фильтрами из внешних файлов. Этот баг они не могут решить вот уже 5 лет
<svg height=0 >
<g id="arrow">
<polygon points="38.25,0 38.25,357 318.75,178.5" />
</g>
</svg>
Тест:
<svg>
<use xlink:href="#arrow"/>
</svg>
Если svg во внешнем файле, нужно указать путь к нему:
<!-- `<use>` внутри документа -->
<svg viewBox="0 0 100 100">
<use xlink:href="#icon-1"></use>
</svg>
<!-- `<use>` во внешнем файле-->
<svg viewBox="0 0 100 100">
<use xlink:href="path/to/defs.svg#icon-1"></use>
</svg>
Использование <use>
и стилизация CSS:
.marker use{
fill:red;
}
<svg height=0 >
<g id="arrow">
<polygon points="38.25,0 38.25,357 318.75,178.5" />
</g>
</svg>
Тест:
<span class="marker">
<svg>
<use xlink:href="#arrow"/>
</svg>
</span>
Использование <svg>
как inline-изображение в CSS:
Есть более кроссплатформенный метод. Маркеры списка можно делать так:
.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;
}
<div class=arrow></div>
SVG закодирован через encodeURI:
console.log(encodeURI('<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 22 44" width="20" height="40"><path d="M 10,0 0,20 10,40" style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path d="M 20,0 10,20 20,40" style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></svg>'))
Полученное помещается в CSS таким образом:
background: url('data:image/svg+xml,[код картинки]')