Как использовать символы SVG в CSS?

Использование символов в форматах SVG кажется мне хорошей идеей, поэтому вы можете загружать только один SVG файл и использовать его как своего рода spritemap.

Мне кажется, что это неправильно, чтобы напрямую включать теги <svg></svg> в свой html для значков, поскольку они являются только презентацией и должны быть добавлены в мой CSS.

Есть ли способ добавить символ из svg в псевдо-элементе :after в моем CSS?

ОТВЕТЫ

Ответ 1

Вы можете ссылаться на фрагменты в CSS таким образом (фрагменты должны иметь идентифицированный идентификатор):

.element {
background-image: url('vector.svg#fragment');
}

Вы также можете показать определенную область, обрезая ее с помощью viewBox:

.element {
background-image: url('vector.svg#fragment(viewBox(0,0,25,25))');
}

Здесь вы можете узнать больше об этих методах: http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/

Другим способом может быть создание всех ваших символов в шрифте значка.

Ответ 2

Как упоминалось в комментарии Blazemonger, вы можете передать его внутри content элемента after.

Но если вы установите его как background для after, вам будет больше контролировать его в отношении size, position и любых других свойств, которые могут иметь фоновое изображение

HTML

<div id = "mydiv"><div>

CSS

#mydiv{
    width:500px;
    height:100px;
    background:tomato;
}

#mydiv:after{
    content:"After of #mydiv";
    width:500px;
    height:100px;
    background:url('http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg') no-repeat;
    position:absolute;
    top:200px;
    border:solid 1px tomato;
}

Вы можете сохранить svg как отдельный файл и указать его как url для background DEMO

Подробнее о способах добавления SVG на страницу здесь

Ответ 3

Обратите внимание на raphael.js, если вы хотите создать динамический svg

- извините, ссылка не работает