Встраивание SVG в CSS
Иногда возникает необходимость вставить SVG-картинку инлайном как значение какого-нибудь свойства в CSS. Например, иконки как фоновые картинки, когда мы пишем
Стоян Стефанов напоминает, что почти все браузеры (кроме старых вроде IE), нуждаются в кодировании всего 3 символов:
У Юли Бухваловой есть готовый инструмент под такое: https://yoksel.github.io/url-encoder/. В нём преобразуется большее количество символов, но зато более надёжно.
https://www.phpied.com/truth-encoding-svg-data-uris/
Иногда возникает необходимость вставить SVG-картинку инлайном как значение какого-нибудь свойства в CSS. Например, иконки как фоновые картинки, когда мы пишем
background-image: url('data:image/svg+xml;base64,A1B2...C3=').Стоян Стефанов напоминает, что почти все браузеры (кроме старых вроде IE), нуждаются в кодировании всего 3 символов:
<, > и #. Поэтому делать полноценный base64 точно не нужно — это не читаемо, не редактируемо, раздувает бандл. Дайте gzip делать его работу.У Юли Бухваловой есть готовый инструмент под такое: https://yoksel.github.io/url-encoder/. В нём преобразуется большее количество символов, но зато более надёжно.
https://www.phpied.com/truth-encoding-svg-data-uris/