Как вставить svg прям в css?

Question

[riksisharakshas]

Попросили вставить svg на фон не как url, а как svg объект, чтобы оно кэшировалось и чего-то я завис, не слышал вообще о такой возможности, используется less. Нагуглить не получается, может тут что подскажите?

Answer 1

[AngReload]

yoksel.github.io/url-encoder/ru

Comments

[Moskus]

А нафига кодировать в Base64, если SVG - не бинарный формат, увеличивая его объем на 25%?

[AngReload]

Moskus, нет, он не кодирует в Base64, только экранирует некоторые символы.

[Moskus]

AngReload, занятно, тогда сам автор инструмента неправильно его называет.

[Алексей Уколов]

Moskus, что неправильного в названии? URL-энкодер, про base64 у неё о слова.

[Moskus]

Алексей Уколов, ну, "URL encoding" не имеет к тому, что делает этот инструмент, никакого отношения. Потому что внедрение изображений в код - это data URI scheme, в которой используется либо plain text (что уместно для SVG), либо base64 (что для него неуместно).
А URL encoding - это использование percent encoding для URL, то есть для адресов (в http-запросах и ссылках, например).
Просто когда AngReload дал ссылку на инструмент, в названии которого есть "encoder", я предположил, что автор инструмента просто перепутал URL и URI. Оказывается, не только.

[Алексей Уколов]

А URL encoding - это использование percent encoding для URL, то есть для адресов (в http-запросах и ссылках, например).

Именно это указанный сайт и делает.

Answer 2

[Moskus]

Например, так:

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Comments

[Павло Пономаренко]

Круто.