Можно ли вставить svg используя :after?

Question

[Tigronix]

Можно ли вставить svg используя только :after?

Answer 1

[Дмитрий Маринин]

Конечно. Используйте для этого свойство content.

.some-element::after {
    content: url('data:image/svg+xml; base64, <тут_закодированный_svg>');
    /* или */
    content: url("data:image/svg+xml; utf8, <тут_код_svg>");
}

P.S. в CSS3 для псевдо-элементов необходимо использовать два двоеточия ::before, ::after, вместо одного.

Comments

[Сергей Протько]

SVG текстовый формат, а стало быть его не нужно экнодить в base64, это только добавит ~33% от веса SVG-ки без какого-либо профита.

[Сергей Протько]

И да, спасибо, не знал что инлайны работают...

[Дмитрий Маринин]

Сергей Протько: base64 нужен для IE8.

[Tigronix]

content: url("data:image/svg+xml; utf8, .fa .fa-minus");
Так должно быть? Я не очень понял...

[Дмитрий Маринин]

Tigronix: нет, там где вы написали ".fa .fa-minus" — должен быть код SVG.

[Tigronix]

Дмитрий Маринин: спасибо

[Мак Алексей]

У меня вопрос по картинке: а так необходимо чтобы этот элемент был - SVG? Ведь это накладнее по коду, времени рендеринга ну и совместимости. ИМХО но я бы делал это вставкой символа.

[Сергей Протько]

Дмитрий Маринин: для ie8 нужен не base64 svg а base64 фэлбэк в png, или ie8 умеет SVG отображать?

[Дмитрий Маринин]

Сергей Протько: не умеет. Как вы правильно написали, для IE8 нужен фолбек в виде data:image/png; base64.

[sumanai]

Вставлять SVG инлайн в стили нельзя, необходимо кодировать, иначе не работает в ФФ и ИЕ, да и не по стандарту.

[Сергей Протько]

sumanai: uriencode и вперед

Answer 2

[Саша]

Да можно, я опадал.
Но скажу одно, есть один минус, посмотрите в разных браузерах.
Отображаются они по разному (иногда, в старых браузерах особенно в опере) ie до 9 вообще не поддерживает, так что надо определять поддержку а после выставлять соответствующий класс.
Если не поддерживается, то ссылка на png/

Comments

[Саша]

Так что лучше с начала запихать все это в документ, а после выводить.