Прилетела задача:
Нужно допилить тему для сайта и там под это дело вставить аж целый css-класс, который будет отображать иконку в кнопке.
Но есть парочка «Но»…
Что делать? Как быть?
Вариант номер раз:
Тут почти все хорошо… за исключением того, что нужно нашу svg прогонять через encoding (вот такой сервис)
и вместо красивого svg мы получаем
В результате получаем масштабируемую иконку ценой в 309 байт.
Теперь поясню некоторые моменты:
В content точно так же можно впихнуть url, а в него inline.
Единственный минус этого действа, цвет заливки нужно прописывать непосредственно в svg файле. Было бы неплохо, если бы работал currentColor или fill, но у меня не получилось заставить это работать.
Нужно допилить тему для сайта и там под это дело вставить аж целый css-класс, который будет отображать иконку в кнопке.
Но есть парочка «Но»…
- Иконочных шрифтов нет.
- Подгружать внешние файлы нельзя.
- С помощью js/canvas/html рисовать нельзя.
- Иконка должна быть масштабируемая.
Что делать? Как быть?
Вариант номер раз:
Тут почти все хорошо… за исключением того, что нужно нашу svg прогонять через encoding (вот такой сервис)
и вместо красивого svg мы получаем
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%....2Fsvg%3E%0AВ результате получаем масштабируемую иконку ценой в 309 байт.
Теперь поясню некоторые моменты:
- data:image/svg+xml — этим мы объясняем браузеру, что сейчас будем впихивать сюда inline-ресурс, который из себя представляет изображение в формате svg+xml
- charset=utf-8 — штука вроде бы и не обязательная, но желательная (ибо фиг знает, что там у вас за кодировка, а svg/xml должны быть в utf-8)
- в самом svg-коде должен присутствовать аттрибут xmlns=«www.w3.org/2000/svg», без него не работает.
В content точно так же можно впихнуть url, а в него inline.
Единственный минус этого действа, цвет заливки нужно прописывать непосредственно в svg файле. Было бы неплохо, если бы работал currentColor или fill, но у меня не получилось заставить это работать.